'Linked image with hidden text not responding to css hover declarations when hovering over text

So I have linked images that display text when hovering over them and the goal is to have the image change opacity while hovering but when I hover over the text on the image, the opacity changes back to 100% and the link is no longer clickable. I can't seem to find any solutions for this so I figured I would make a post on here. Any help would be greatly appreciated!

.imgwrap{
position: relative;
opacity: 1;
z-index: 1;
}

.img-desc {
  display: block;
  position: absolute;
  top: 50%;
  bottom: 50%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1.8vw;
  color: white;
  visibility:hidden;
  
}
.img-wrap:hover {
opacity: 80%;
transition: opacity  .32s;
}
.imgwrap:hover .img-desc {
  visibility: visible;
  transition: .32s;
  cursor: pointer;
}
  <div class="imgwrap">
  <a href="https://codepen.io/"> <img id="utah"  src="https://lh3.googleusercontent.com/_ZxQwhvz4DQkl7s5NsG_iRTrdbTIQTCU-KhatC1hrx6XMST5LT80R557OtvYBxXqtrtbg0k7u_jqVSvYqfyvMOl4BkudnQMHYUVYirOs02Bpmuf-Ad5gTPzEr721QTs0ZaBA3hqf9A=w600-h315-p-k" /> </a> <p class="img-desc"> Utah </p> </div>
htmlcss


Solution 1:[1]

There are a few odds and ends here which this snippet attempts to tidy up:

visibility isn't animatable in the way you might suppose so that's removed and opacity used instead

for consistency the classes have been named with a hyphen

the transitions have been moved from only being set on the hover state to being set for the image and description elements so that they work also when the user moves the cursor out

the description element actually had no height as both top and bottom were set to 50%. To make centering more straightforward the element now has the full height and width of the container and is displayed flex with the text being centered.

the description allows the click to still go through to the anchor element by itself unsetting pointer events

.img-wrap{
position: relative;
opacity: 1;
z-index: 1;
display: inline-block;
}

.img-desc {
  position: absolute;
  text-align: center;
  font-size: 1.8vw;
  color: white;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: .32s;
}
.img-wrap img {
transition: opacity  .32s;
}
.img-wrap:hover img {
opacity: 80%;
}
.img-wrap:hover .img-desc {
  opacity: 1;
  cursor: pointer;
}
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <div class="img-wrap">
      <a href="https://codepen.io/"> <img id="utah"  src="https://lh3.googleusercontent.com/_ZxQwhvz4DQkl7s5NsG_iRTrdbTIQTCU-KhatC1hrx6XMST5LT80R557OtvYBxXqtrtbg0k7u_jqVSvYqfyvMOl4BkudnQMHYUVYirOs02Bpmuf-Ad5gTPzEr721QTs0ZaBA3hqf9A=w600-h315-p-k" /> </a> <p class="img-desc"> Utah </p> </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 A Haworth

Related Questions