使用 CSS 进行过渡的颜色叠加答案

【问题标题】：Colour overlays with transitions using CSS使用 CSS 进行过渡的颜色叠加
【发布时间】：2016-03-18 03:02:25
【问题描述】：

当我将鼠标悬停在图像上时，我一直在尝试获得带有文本的彩色叠加层。我得到了覆盖和文本，但似乎无法获得过渡。我不确定代码应该放在哪里，但我已经把它移动了，但它没有工作，所以我一定在某个地方有另一个错误。感谢您的帮助！

html

<div class="portfolio-sample">
<a href="https://www.google.ca/">
    <img src="https://56.media.tumblr.com/4171ae7ff6b1f4aa69a49077cf15914f/tumblr_o47q56HKdW1qkdz1ko1_400.jpg">
        <div class="overlay">
            <span>Text 
                <br>text text
            </span>
        </div>
</a>

css

.portfolio-sample {
margin: 20px 20px;
float: left; 
display:block;
position:relative;
}

.overlay {
position:absolute;
top:0;
width:100%;
height:100%;
display:none;
background: rgba(255, 255, 255, 1);
transition: all 0.5s ease; 
}

.portfolio-sample:hover .overlay {
color: #383838; /*grey3*/
font: 3em 'Open Sans', Verdana, sans-serif;
font-weight: 700; 
text-align: center;
display: flex;
justify-content:center;
flex-direction:column;
opacity:0.9;
}

【问题讨论】：

您不能为display:none 属性设置动画。请改用opacity:0.0。

标签： html css overlay transitions

【解决方案1】：

所以是这样的吗？根据经验，尝试将尽可能多的 CSS 放在正常（非过渡）样式规则中。然后只在:hover 规则中添加要转换的规则。在这种情况下，:hover 规则中只需要opacity:0.9。

.portfolio-sample {
  margin: 20px 20px;
  float: left; 
  display:block;
  position:relative;
}

.overlay {
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  background: rgba(255, 255, 255, 1);
  transition: opacity 0.5s ease; 
  color: #383838; /*grey3*/
  font: 3em 'Open Sans', Verdana, sans-serif;
  font-weight: 700; 
  text-align: center;
  display: flex;
  justify-content:center;
  flex-direction:column;
  opacity:0;
}

.portfolio-sample:hover .overlay {
  opacity:0.9;
}

<div class="portfolio-sample">
  <a href="https://www.google.ca/">
    <img src="//placehold.it/500">
    <div class="overlay">
      <span>Text 
        <br>text text
      </span>
    </div>
  </a>
</div>

【讨论】：

谢谢，这太完美了！我很感激这个提示:)

【解决方案2】：

这是你想要的animation？顺便说一句，使用visibility 这样动画就会运行。

.portfolio-sample {
margin: 20px 20px;
float: left; 
display:block;
position:relative;
}

.overlay {
position:absolute;
top:0;
width:100%;
height:100%;
display:block;
visibility:hidden;
opacity:0;
background: rgba(255, 255, 255, 1);
transition: all 0.5s ease; 
}

.portfolio-sample:hover .overlay {
  visibility:visible;
color: #383838; /*grey3*/
font: 3em 'Open Sans', Verdana, sans-serif;
font-weight: 700; 
text-align: center;
display: flex;
justify-content:center;
flex-direction:column;
opacity:0.7;
}

<div class="portfolio-sample">
<a href="https://www.google.ca/">
    <img src="https://56.media.tumblr.com/4171ae7ff6b1f4aa69a49077cf15914f/tumblr_o47q56HKdW1qkdz1ko1_400.jpg">
        <div class="overlay">
            <span>Text 
                <br>text text
            </span>
        </div>
</a>
</div>

【讨论】：