在 Squarespace 上使用 HTML 和 CSS 的悬停功能

Question

注意：对不起，我对此绝对陌生。感谢您让我知道您在这篇文章中发现的错误。下次我会努力做得更好。 :)

我在 Squarespace 上为设计客户制作的悬停效果有问题。 （我不会写代码，哈哈）

我想做的是当用户将鼠标悬停在图像上时，图像变暗并出现文本块。 我能够让它工作，但不知何故它只在一个悬停在顶部时起作用，否则它不起作用。

这里有录音

在方形空间中：我添加了一个图像块，以及带有文本的 HTML 代码块。

有人可以检查如何解决这个问题吗？感谢您的帮助！ TIA

.img-container {
  position: relative;
  z-index: 2;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  background-color: #101440;
  opacity: 80%;
  color: white;
  padding: 10px 20px;
  height: 500px;
  border-radius: 50px;
  z-index: 1;
}

.img-container:hover .overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="img-container">
  <img src="https://images.squarespace-cdn.com/content/v1/63b5…516bb941/shutterstock_1603765507.jpg?format=1000w
" alt="">
  <div class="overlay">
    <p style="font-size: 0.8em; padding: 0 20px;">text goes here</p>
    </p>
  </div>
</div>

Answer 1

总结这个方法：
创建一个环绕您的图像和文本的 DIV（并让 DIV 直接位于其之上）。 然后（在我们的例子中）我们使文本立即悬停颜色变化（通过不透明度变暗），并使图像延迟过渡（使用过滤器）。 这个谜题的全部关键是使悬停前最初是 invisible，然后在悬停时文本的不透明度立即激活，而 0.5 秒后图像变暗。 所以...'hoverMe' DIV 是通过包装BOTH 图像和文本来解决的解决方案。 这是一个示例解决方案：

html, body {
  margin: 0;
  padding: 0;
}

* { box-sizing: border-box;}

.container {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1em;
  color: #fff;
  position: relative;
  width: min(calc(100% - 1em), 22em);
  margin: auto;  /*--set image top center--*/
}

/*--Keep image stacked exactly on top--*/
.container img {
  vertical-align: middle; 
  width: 100%;}

.content {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  margin: auto;
}

.text-frame {
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
}

.text-info {
  margin: 0;
  padding: 8px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}

h3 {color:#ffff00;}

/* Hover protocol */
.text-info {visibility: hidden;}
.hoverMe:hover .text-info {opacity:1.0;}
.hoverMe:hover .text-info {visibility:visible;}
.hoverMe:hover img {filter: brightness(70%); transition: all 0.5s ease-in-out;}

/*--Responsive--*/
@media screen and (max-width: 300px) {
    .text-info {
      font-size: calc(1vw + 1vh + 1vmin);
    }
}

<div class="container">
  <div class="hoverMe">
    <div class="content">
        <img src="https://via.placeholder.com/400x600.gif">
      <div class="text-frame">
        <div class="text-info">
          <h3>SCENE</h3>
          <p>Lorem ipsum dolor sit amet an hia eti torquatos zxanlo arumit.</p>
        </div><!--close text-info-->
      </div><!--close text-frame-->
    </div><!--close content-->
  </div><!--close hover-->
</div><!--close container-->