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

pftdvrlh 于 2023-03-05 发布在其他

关注(0)|答案(1)|浏览(97)

注：对不起，伙计们，我对这个完全是新手。谢谢你们让我知道你们发现了这篇文章中的错误。下次我会努力做得更好。：）*

我在Squarespace上为一个设计客户制作的悬停效果遇到了问题。***（我不知道如何编码，哈哈）***
我尝试做的是当用户悬停在一张图片上时，图片会变暗，并出现一个文本块。我能够让它工作，但不知何故，它只在用户悬停在上面时工作，否则它就不工作了。
Here's a recording
在平方空间：我添加了一个图像块，以及上面带有文本的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>

css

来源：https://stackoverflow.com/questions/75611141/hover-function-using-html-and-css-on-squarespace

1条答案

按热度按时间

watbbzwu1#

总结一下这个方法：
创建环绕影像和文本的DIV（并让DIV直接位于所有这些之上）。然后（在我们的示例中）我们使文本立即发生悬停颜色变化（通过不透明度变暗），以及延迟过渡的图像（使用过滤器）。这个谜题的全部关键是使悬停前最初是 * 不可见的 *，然后在悬停时文本的不透明性立即激活，而0.5秒后，图像变暗。所以...'hoverMe' DIV是通过 Package 两个的图像和文本解决方案。我选择设置文本背景色调较暗，图像覆盖略亮，这增加了一个额外的小步骤CSS。这里是一个示例解决方案：

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-->

赞(0）回复(0）举报 2023-03-05

我来回答

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

1条答案

相关问题

热门标签

最新问答