css 3 image hover overlay

Question

I have created an image effect where an image is zoomed in on hover, while the overlay text stays the same size. I am now trying to create a semi opaque dark overlay over the image on hover but the overlay effect will not take effect with the zoom transform. The shadow overlay seems to conflict with the zoom. This is my code so far:

.grid_container>.box-item,
.grid_container>.box-itemw {
  width: 100%;
}

.box-item img,
.box-itemw img {
  width: 100%;
}

.box-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  ms-transform: translate(-50%, -50%);
  color: var(--white);
  font-size: 20px;
}

.grid_container {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 5px;
}

.grid_container>.box-item {
  position: relative;
  align-content: flex-start;
  width: calc(33.33% - 40px);
}

.grid_container>.box-itemw {
  position: relative;
  align-content: flex-start;
  width: calc(100% - 40px);
}

.box-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  ms-transform: translate(-50%, -50%);
  color: var(--white);
  font-size: 20px;
  z-index: 999;
}

.box-item,
.box-itemw {
  position: relative;
  /* border: 1px solid red; */
  display: inline-block;
  max-height: 300px;
  max-width: 100%;
  overflow: hidden;
}

.service-image:hover,
.box-text:hover+.service-image {
  transform: scale(1.1);
  transition: all 1s;
}

.box-item:before {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: inherit;
  content: ' ';
  overflow: hidden;
  transition: .5s;
}

.box-item:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

<div class="grid_container">
  <div class="box-item">
    <img src="https://placehold.co/600x400" class="service-image" alt="travel 1">
    <div class="box-text">
      dummy text
    </div>
  </div>
</div>

I have tried various over code combinations but no solution. Any suggestions about the code would be most appreciated.

Answer 1

The z-index: 1 for overlay should keep it above the transformed image.

A selector of zoom effect rule can be changed to work with :hovered parent: .box-item:hover .service-image.

.grid_container>.box-item,
.grid_container>.box-itemw {
  width: 100%;
}

.box-item img,
.box-itemw img {
  width: 100%;
}

.box-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  ms-transform: translate(-50%, -50%);
  color: var(--white);
  font-size: 20px;
}

.grid_container {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 5px;
}

.grid_container>.box-item {
  position: relative;
  align-content: flex-start;
  width: calc(33.33% - 40px);
}

.grid_container>.box-itemw {
  position: relative;
  align-content: flex-start;
  width: calc(100% - 40px);
}

.box-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  ms-transform: translate(-50%, -50%);
  color: var(--white);
  font-size: 20px;
  z-index: 999;
}

.box-item,
.box-itemw {
  position: relative;
  /* border: 1px solid red; */
  display: inline-block;
  max-height: 300px;
  max-width: 100%;
  overflow: hidden;
}

.service-image:hover,
.box-item:hover .service-image {
  transform: scale(1.1);
  transition: all 1s;
}

.box-item:before {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: inherit;
  content: ' ';
  overflow: hidden;
  transition: .5s;
  z-index: 1;
}

.box-item:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

<div class="grid_container">
  <div class="box-item">
    <img src="https://placehold.co/600x400" class="service-image" alt="travel 1">
    <div class="box-text">
      dummy text
    </div>
  </div>
</div>