图像悬停或特异性导致悬停效果出现问题

Question

我正在尝试对图像产生悬停效果。我有一个名为 img-wrapper 的容器，里面有图像。我还有一个 a 元素，其中包含我的图片标题。当图像悬停时，我试图从顶部滑动这个标题。但我不能那样做。这里有什么问题？

.img-wrapper {
  width: 500px;
  height: 500px;
  position: relative;
  overflow: hidden;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  font-family: cursive;
  font-size: 22px;
  color: white;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-100%);
  background: rgba(0, 0, 0, 0.4);
  transition: transform 0.4s ease-in-out;
  
}
/* what is wrong with this ?*/

.img-wrapper img:hover .overlay {
  transform: translateY(100%);
}

 <div class="img-wrapper shawn">
            <img src="https://yt3.ggpht.com/ytc/AKedOLQr4jecB-LuH1oJ0fzsdPNW7DMkSu3C-H6rvh6iJg=s900-c-k-c0x00ffffff-no-rj" alt="">
            <a class="overlay" href=""><p>Shawn Mendes</p></a>
        </div>

Answer 1

您可以尝试使用 .img-wrapper:hover .overlay { transform: translateY(10%); } 这样您可以在输入时看到标题

.img-wrapper {
  width: 500px;
  height: 500px;
  position: relative;
  overflow: hidden;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  font-family: cursive;
  font-size: 22px;
  color: white;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-100%);
  background: rgba(0, 0, 0, 0.4);
  transition: transform 0.4s ease-in-out;
  
}
/* what is wrong with this ?*/

.img-wrapper:hover .overlay {
  transform: translateY(10%);
}

<div class="img-wrapper shawn">
            <img src="https://yt3.ggpht.com/ytc/AKedOLQr4jecB-LuH1oJ0fzsdPNW7DMkSu3C-H6rvh6iJg=s900-c-k-c0x00ffffff-no-rj" alt="">
            <a class="overlay" href=""><p>Shawn Mendes</p></a>
        </div>

Answer 2

.img-wrapper {
  width: 500px;
  height: 500px;
  position: relative;
  overflow: hidden;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  font-family: cursive;
  font-size: 22px;
  color: white;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-100%);
  background: rgba(0, 0, 0, 0.4);
  transition: transform 0.4s ease-in-out;
  
}
/* what is wrong with this ?*/
/* css change here */
.img-wrapper:hover  .overlay {
  transform: translateY(0);
}

   <div class="img-wrapper shawn">
      <img src="https://yt3.ggpht.com/ytc/AKedOLQr4jecB-LuH1oJ0fzsdPNW7DMkSu3C-H6rvh6iJg=s900-c-k-c0x00ffffff-no-rj" alt="">
      <a class="overlay" href=""><p>Shawn Mendes</p></a>
  </div>

Answer 3

我相信这就是您要找的：

.img-wrapper {
  width: 500px;
  height: 500px;
  position: relative;
  overflow: hidden;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  font-family: cursive;
  font-size: 22px;
  color: white;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-100%);
  background: rgba(0, 0, 0, 0.4);
  transition: transform 0.4s ease-in-out;
  
}
/* the correct way :) */

.img-wrapper:hover .overlay {
  transform: translateY(0);
}

 <div class="img-wrapper shawn">
            <img src="https://yt3.ggpht.com/ytc/AKedOLQr4jecB-LuH1oJ0fzsdPNW7DMkSu3C-H6rvh6iJg=s900-c-k-c0x00ffffff-no-rj" alt="">
            <a class="overlay" href=""><p>Shawn Mendes</p></a>
        </div>

您的代码无法正常工作的原因是，正如 Heretic Monkey 所解释的那样，“.overlay”元素未被正确调用。但除此之外，我认为悬停在父容器上会更有效率。

此外，通过将 translateY 从 -100% 设置为 100% 实现的是元素穿过容器并再次消失。这就是为什么您应该将 de 100% 值更改为 0。

图像悬停或特异性导致悬停效果出现问题

Image hover or specificity is causing issue with hover effect

html

css

image

hover