Question

我需要做一个任务，我有一个图像，这个图像被覆盖在一些颜色淡入淡出，当我悬停在图像上 - 淡化消失（示例是https://html5up.net/uploads/demos/forty/）。我做到了，但我也必须做一个转换，以便消失的淡入淡出会慢2秒。我试图将过渡属性放在任何地方，但我失败了。有什么帮助吗？

.photo-text.one {
  background-size: cover;
  background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
  height: 409px;
  position: relative;
  width: 576px;
}

.img-overlay {
  width: 100%;
  height: 100%;
  background: #6fc3df;
  opacity: 0.75;
}

.photo-text.one:hover:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}

.text {
  position: absolute;
  top: 100px;
  left: 150px;
  color: red;
  z-index: 1;
}

<div class="photo-text one">
  <div class="img-overlay"></div>
  <h2 class="text">fffff</h2>
</div>

Answer 1

而不是这段代码：

.photo-text.one:hover:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}

您可以通过简单地隐藏叠加层来简化，方法是通过不透明度的转换和所需的持续时间将其不透明度修改为0：

.photo-text.one:hover > .img-overlay{
  transition: opacity 1.5s ease-in-out;
  opacity: 0;
}

.photo-text.one {
  background-size: cover;
  background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
  height: 409px;
  position: relative;
  width: 576px;
}

.img-overlay {
  width: 100%;
  height: 100%;
  background: #6fc3df;
  opacity: 0.75;
  transition: opacity 1s ease-in-out;
}

.photo-text.one:hover > .img-overlay{
  transition: opacity 1.5s ease-in-out;
  opacity: 0;
}

.text {
  position: absolute;
  top: 100px;
  left: 150px;
  color: red;
  z-index: 1;
}

<div class="photo-text one">
  <div class="img-overlay"></div>
  <h2 class="text">fffff</h2>
</div>

Answer 2

你可以只hover超过.img-overlay，但由于你也想在悬停文本时产生同样的效果，请保持原样，只需更换使用:after > .img-overlay 伪元素（不需要它），将其opacity设置为0并应用{{1根据需要属性：

transition

.photo-text.one {
  background-size: cover;
  background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
  height: 409px;
  position: relative;
  width: 576px;
  max-width: 100%; /* responsiveness */
}

.img-overlay {
  position: absolute; /* needs to be on the child since the relative position is on the parent */
  width: 100%;
  height: 100%;
  background: #6fc3df;
  opacity: 0.75;
  transition: opacity 2s linear; /* optional / when "unhovering" */
}

/* added */
.photo-text.one:hover > .img-overlay {
  opacity: 0;
  transition: opacity 2s linear; /* can also try other values such as "ease", "ease-out" etc. */
}

.text {
  position: absolute;
  top: 100px;
  left: 150px;
  color: red;
  z-index: 1;
}

过渡css悬停效果对图像

2 个答案: