图像上的过渡 css 悬停效果答案

【问题标题】：Transition css hover effects on image图像上的过渡 css 悬停效果
【发布时间】：2018-09-29 18:06:04
【问题描述】：

我需要做一个我有图像的任务，这个图像被一些颜色淡化覆盖，当我将鼠标悬停在图像上时 - 淡化消失（例如 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>

【问题讨论】：

标签： html css hover css-transitions

【解决方案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>

【讨论】：

这就是我需要的！非常感谢
@AndyG 没问题，如果您发现它有帮助，请不要伪造评分或标记答案。干杯:)
我还有一个问题：当我将鼠标悬停在文本上时 - 没有任何反应，覆盖（蓝色）不会消失。我应该添加什么？
它正在消失，你在说什么？将鼠标悬停在 fffff 上，蓝色覆盖消失/

【解决方案2】：

您可以只在.img-overlay 上使用hover，但由于您也希望在悬停文本时获得相同的效果，请保持原样并替换:after 伪元素（不需要它）与> .img-overlay，将其opacity 设置为0 并根据需要应用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;
}

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

【讨论】：