When hovering over the text , the scale property is not applying(it scales back to original.)

https://codepen.io/nuclax/pen/RwMGwKK

<div >
      <figure >
        <img
          
          src="https://live.staticflickr.com/2462/3934247179_f29557d66a_z.jpg"
          alt="photo of beautifully arranged food"
        />
        <div >
          <p>Omelette</p>
        </div>
</figure>

CodePudding user response：

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

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

CodePudding user response：

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 >
  <figure >
    <img 
    src="https://live.staticflickr.com/2462/3934247179_f29557d66a_z.jpg"
    alt="photo of beautifully arranged food" />
    <div >
      <p>Omelette</p>
    </div>
  </figure>
</div>