如何在 Squarespace 中将文本悬停居中？

Question

站点 URL：https://www.jeulianne.com/portfolio

大家好，我有一个 Squarespace 问题。

我是编码初学者。在我的网站上，我有多个自动播放和循环播放的短片；他们基本上就像 gif 一样。我通过使用代码块实现了这一点。每个块中还插入了一个 link，供观众重定向到完整视频。

这是我的代码块之一的代码示例：

<a href="link here" target="_blank">
  <video class="video" width="100%" height="100%" autoplay loop playsinline>
    <source src="s/video.mp4" type="video/mp4">
    <source src="s/video.webm" type="video/webm">
    Sorry, your browser doesn't support HTML5 video.
  </video>
  <div class="overlay">
    <div class="text">
      <h3 class="text h3">The Secret Kingdom</h3>
    </div>
  </div>
</a>

在我的自定义 CSS 中，我为代码块添加了悬停效果，因此观众可以将鼠标光标悬停在剪辑上并单击它们。我能够顺利实现黑色淡入和淡出过渡，但我似乎无法将文本正确居中。文本的位置在不同的设备上显示不同。

这是我目前的代码：

/* ----- Block Hover ----- */
#block-yui_3_17_2_1_1589451992993_20908,
#block-yui_3_17_2_1_1589450893966_20367,
#block-yui_3_17_2_1_1589447618241_19753,
#block-yui_3_17_2_1_1589447618241_20564,
#block-yui_3_17_2_1_1589448047699_19059 {
  display: block;
  position: relative;
  width: auto;
}

#block-yui_3_17_2_1_1589451992993_20908 .video,
#block-yui_3_17_2_1_1589450893966_20367 .video,
#block-yui_3_17_2_1_1589447618241_19753 .video,
#block-yui_3_17_2_1_1589447618241_20564 .video,
#block-yui_3_17_2_1_1589448047699_19059 .video {
  width: 100%;
  height: 100%;
}
  
#block-yui_3_17_2_1_1589451992993_20908 .overlay,
#block-yui_3_17_2_1_1589450893966_20367 .overlay,
#block-yui_3_17_2_1_1589447618241_19753 .overlay,
#block-yui_3_17_2_1_1589447618241_20564 .overlay,
#block-yui_3_17_2_1_1589448047699_19059 .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #000000;
}

#block-yui_3_17_2_1_1589451992993_20908:hover .overlay,
#block-yui_3_17_2_1_1589450893966_20367:hover .overlay,
#block-yui_3_17_2_1_1589447618241_19753:hover .overlay,
#block-yui_3_17_2_1_1589447618241_20564:hover .overlay,
#block-yui_3_17_2_1_1589448047699_19059:hover .overlay {
  opacity: 0.85;
}

#block-yui_3_17_2_1_1589451992993_20908 .text,
#block-yui_3_17_2_1_1589450893966_20367 .text,
#block-yui_3_17_2_1_1589447618241_19753 .text,
#block-yui_3_17_2_1_1589447618241_20564 .text,
#block-yui_3_17_2_1_1589448047699_19059 .text {
  position: absolute;
  padding-top: 50%;
  left: 50%;
  width: 100%;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#block-yui_3_17_2_1_1589451992993_20908 .text h3,
#block-yui_3_17_2_1_1589450893966_20367 .text h3,
#block-yui_3_17_2_1_1589447618241_19753 .text h3,
#block-yui_3_17_2_1_1589447618241_20564 .text h3,
#block-yui_3_17_2_1_1589448047699_19059 .text h3 {
  color: #FFFFFF;
  height: 100%;
  width: 100%;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
}

如果能提供解决此问题的帮助，我将不胜感激。有什么方法可以改进我的代码吗？

提前致谢！

Answer 1

对于您的 .text class 尝试使用这个：

#block-yui_3_17_2_1_1589451992993_20908 .text,
#block-yui_3_17_2_1_1589450893966_20367 .text,
#block-yui_3_17_2_1_1589447618241_19753 .text,
#block-yui_3_17_2_1_1589447618241_20564 .text,
#block-yui_3_17_2_1_1589448047699_19059 .text {
  position: absolute;
  display: flex;
  align-items:center;
  justify-content: center;
  left: 50%;
  width: 100%;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

如何在 Squarespace 中将文本悬停居中？

How to center text hover in Squarespace?

html

css

hover

effect

squarespace