Image hover or specificity is causing issue with hover effect [duplicate]

Solution for Image hover or specificity is causing issue with hover effect [duplicate]
is Given Below:

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>

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.

You can try with .img-wrapper:hover .overlay { transform: translateY(10%); } so you can see title when enters

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