Image hover or specificity is causing issue with hover effect

Question

I am trying to have a hover effect on image. I have a container called img-wrapper and inside that I have image. I also have an a element which encloses my title of image. I am trying to slide this title from top when image is being hovered. But I am not able to do that. What is wrong here?

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

`img:hover .overlay` means "an element with the class `overlay` that is a descendant of a hovered `img` element". Since `img` elements can't have children, it makes little sense. You probably want `~` or `+`, one of the "sibling" selectors instead of the space. — Heretic Monkey, Aug 02 '21 at 15:38

score 1 · Accepted Answer · answered Aug 02 '21 at 15:53

I believe this is what you're looking for:

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

The reason why your code was not working is because, as Heretic Monkey has explained, the ".overlay" element is not being called correctly. But apart from that, I think it would be more efficient to hover the parent container.

Also, what you achieve by setting translateY from -100% to 100% is the element passing through the container and disappearing again. That's why you should change de 100% value to 0.

But why it is efficient to hover the parent container, @Bettylex? Isn't hovering on `img` is same as hovering on `container` itself? What is difference between these two methods? Please help me clear this concept. Thank you — Biebk, Aug 03 '21 at 01:54
I didn't mean in terms of performance. You are right, in this case, both are the same in terms of speed and functionality. But it's better for CSS optimization and readability. Whereas hovering the parent is an easy formule: ".img-wrapper:hover .overlay { transform: translateY(0); }" Doing the same by hovering the image turns it a bit more complex: ".img-wrapper img:hover + .overlay { transform: translateY(100%); }" It doesn't make a bit difference, but I think it's the most efficient way. ;) — Bettylex, Aug 04 '21 at 04:00

score -2 · Answer 2 · answered Aug 02 '21 at 15:47

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

It would be better if you had also explained why you had done that. And what was wrong with my one. Thank you though ! — Biebk, Aug 03 '21 at 01:49

Image hover or specificity is causing issue with hover effect

2 Answers2