html - 向卡片添加过渡

Question

.grid_content {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  display: block;
}

.caption {
  position: absolute;
  z-index: 1;
  bottom: 0;
  padding: 30px;
  colour: white;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 1s;
}

h4 {
  font-family: var(--font-style-custom);
  letter-spacing: 3px;
}

p {
  margin: 5px;
}

h4,
p {
  position: relative;
  top: 85px;
}

.caption:hover {
  transition: 1s;
  opacity: 1;
  background: linear-gradient(hsl(0, 0%, 100%, 0.1), hsl(0 0% 0% / 0.6));
}

<div class="grid_content">
  <img src="https://img.freepik.com/free-psd/box-packaging-mockup-isolated_23-2149208917.jpg?w=740&t=st=1663223199~exp=1663223799~hmac=6f0288bfcdf858b4908269c5406636c1f3c0bfca3e70041f67d9adc5b0be7dea" alt="Brading image">
  <div class="caption">
    <h4>Laynard</h4>
    <p>Brand-identity</p>
  </div>
</div>

每当我将鼠标悬停在图像上时，我希望背景颜色慢慢过渡进和出，但这里它仅在我不悬停时过渡入并消失，我已将过渡添加到卡片中的标题 div 元素但还是没用

Answer 1

由于 caption 类的元素的不透明度最初设置为 0，因此建议包含 background 属性在 .caption {...} 中，而不是在 .caption:hover {...} 中。

此外，删除 .caption:hover 中的 transition 属性，因为它没有用。

您的实现问题是，当光标悬停在元素上时，背景属性会被设置，而当光标不再悬停在元素上时，背景属性将重置，并且transiton 属性不会应用于它。

.grid_content {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  display: block;
}

.caption {
  position: absolute;
  z-index: 1;
  bottom: 0;
  padding: 30px;
  colour: white;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 1s;
  background: linear-gradient(hsl(0, 0%, 100%, 0.1), hsl(0 0% 0% / 0.6));
}

h4 {
  font-family: var(--font-style-custom);
  letter-spacing: 3px;
}

p {
  margin: 5px;
}

h4,
p {
  position: relative;
  top: 85px;
}

.caption:hover {
  opacity: 1;
}

<div class="grid_content">
  <img src="https://img.freepik.com/free-psd/box-packaging-mockup-isolated_23-2149208917.jpg?w=740&t=st=1663223199~exp=1663223799~hmac=6f0288bfcdf858b4908269c5406636c1f3c0bfca3e70041f67d9adc5b0be7dea" alt="Brading image">
  <div class="caption">
    <h4>Laynard</h4>
    <p>Brand-identity</p>
  </div>
</div>