css 3 图像悬停叠加

Question

我创建了一种图像效果，其中图像在悬停时放大，而覆盖文本保持相同大小。我现在尝试在悬停时在图像上创建半不透明的深色叠加层，但叠加效果不会因缩放变换而生效。阴影覆盖似乎与缩放冲突。 这是我到目前为止的代码：

.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>

尝试过各种代码组合但没有解决方案。任何有关代码的建议将不胜感激。

Answer 1

用于叠加的

z-index: 1

应将其保持在变换后的图像上方。

可以更改缩放效果规则的选择器以与

:hover

ed 父级一起使用：

.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>