Question 268716 in Html Question posted in
Some basic documentation can be found here.

Html – <a> tag with text overlay on image, hover effect cancelling image opacity when text is hovered

(hard to word this issue in the title)

I have links that are images with absolute header overlays. I want the opacity of the image to change when any part of the link is hovered. My problem is that when I hover over the text that is overlayed, it omits the :hover state applied to the image.

.galleryItem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  filter: opacity(.7);
  transition: .3s;
}

.galleryItem a,
h4 {
  color: #f5f9e9;
  text-decoration: none;
}

.galleryItem img:hover {
  filter: opacity(1);
}

.galleryItem h4 {
  text-align: center;
  position: absolute;
  top: 41%;
  left: 50%;
  font-size: 1.3em;
  transform: translate(-50%, -50%);
  vertical-align: middle;
  z-index: 10;
  text-shadow: 0px 0px 10px black;
}
<div class="galleryItem">
  <a href="#">
    <h4>The Combinator</h4>
    <img src="img/fwaz.png">
  </a>
</div>

*I DO NOT want the opacity of the h4 tag to change at all. But again, I do need hovering the h3 to maintain the same changes I’ve applied to hovering the img.

I’m not sure how to remedy this problem at all.

Tags:

2

Answers


  1. 0

    Try pointer-events: none; on the h4.

    .galleryItem {
  height: 180px;
  border: 1px solid black;
  position: relative;
}

.galleryItem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: opacity(.7);
  transition: .3s;
}

.galleryItem a, h4 {
  color: #f5f9e9;
  text-decoration: none;
}

.galleryItem img:hover {
  filter: opacity(1);
} 

.galleryItem h4 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.3em;
  transform: translate(-50%, -50%);
  vertical-align: middle;
  z-index: 10;
  text-shadow: 0px 0px 10px black;
  pointer-events: none;
  margin: 0;
}
    <div class="galleryItem">
  <a href="#">
    <h4>The Combinator</h4>
    <img src="https://picsum.photos/1000/360">                     
  </a>
</div>
    Login or Signup to reply.
  2. 0

    Use hover on the parent

    The hover rule should be on a parent which wraps everything.
    When parent is hovered, a child element gets styled, in this case an <img>. Parent could be galleryItem or a, whichever works better.

    .galleryItem:hover img {
    filter: opacity(1);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search