CODEWITHSUNDEEP
htmlcss
Aditya Rastogi
Aditya Rastogi

Reputation: 3

Keep image hover effect when hovering the text in front of it

When hovering over the text (inside an image), the scale property is not applyed (it scales back to original), but when I'm hovering only over the image it works.

.gallery {
  width:500px;
}
.gallery-item {
  overflow: hidden;
  position: relative;
}
.gallery-img {
  display: block;
  width: 100%;
  transition: transform 0.3s;
}
.gallery-img:hover {
  transform: scale(1.2);
  filter: brightness(0.4);
}

.gallery-img-text {
  font-size: 2.4rem;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  visibility: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.gallery-item:hover .gallery-img-text {
  visibility: visible;
  opacity: 1;
}
<div class="gallery">
  <figure class="gallery-item">
    <img
      class="gallery-img"
      src="https://live.staticflickr.com/2462/3934247179_f29557d66a_z.jpg"
      alt="photo of beautifully arranged food"
    />
    <div class="gallery-img-text">
      <p>Omelette</p>
    </div>
  </figure>
</div>

I would like to keep the effect even I hover the text. How can I do it ?

Upvotes: 0

Views: 232

Answers (2)

C&#233;dric
C&#233;dric

Reputation: 2629

It happens because you hover the text instead of the image, you need to select the container and apply your style on the image. Try .gallery-item:hover .gallery-img{} instead of .gallery-img:hover{}

.gallery {
  width:500px;
}
.gallery-item {
  overflow: hidden;
  position: relative;
}
.gallery-img {
  display: block;
  width: 100%;
  transition: transform 0.3s;
}
.gallery-item:hover .gallery-img{
  transform: scale(1.2);
  filter: brightness(0.4);
}
.gallery-img-text {
  font-size: 2.4rem;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  visibility: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-item:hover .gallery-img-text {
  visibility: visible;
  opacity: 1;
}
<div class="gallery">
  <figure class="gallery-item">
    <img class="gallery-img"
    src="https://live.staticflickr.com/2462/3934247179_f29557d66a_z.jpg"
    alt="photo of beautifully arranged food" />
    <div class="gallery-img-text">
      <p>Omelette</p>
    </div>
  </figure>
</div>

Upvotes: 1

Robby Cornelissen
Robby Cornelissen

Reputation: 97140

Set pointer-events: none on your gallery-img-text class:

.gallery-item:hover .gallery-img-text {
  visibility: visible;
  opacity: 1;
  pointer-events: none;
}

Upvotes: 3

Related Questions