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

Issue

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 ?

Solution

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>

Answered By - Cédric