使用 CSS 的过渡颜色叠加

Question

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

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;
}

Answer 1

这就是你想要的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>

Answer 2

是这样的吗？作为一个经验法则，尝试在正常（非过渡）样式规则中放置尽可能多的 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>

使用 CSS 的过渡颜色叠加

Colour overlays with transitions using CSS

html

css

overlay

transitions