背景颜色不变 'smoothly'。 CSS 过渡无效

Question

我的 CSS 转换不工作。悬停出现但缓动过渡不起作用。请帮忙，谢谢！

<div class="6u overlay">
            <a href="astronomy.html" class="image full l">
            <img src="images/thumbs/1.jpg" title="Astronomy Nights Branding UI/UX" alt="Astronomy Nights Branding UI/UX" />
            <div class="after">Astronomy Nights<br/><span style="font-size:0.5em; font-style:italic; letter-spacing:1px;">Branding, UI/UX</span></div></a>
            </div>

CSS

 .overlay {
     position: relative;    }


 .overlay .after {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: none;
     color: #000000;    font-size:1.5em;    font-weight:400;    letter-spacing:-1px;    padding-top:3em; }

 .overlay:hover{    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;   -o-transition: all 0.6s
 ease-in-out;   -ms-transition: all 0.6s ease-in-out;   transition: all
 0.6s ease-in-out;          
        }

 .overlay:hover .after {        
     display: block;
     background: rgba(255, 255, 255, .9);    
     }

Answer 1

您应该使用 visibility: hidden 而不是 disply:none 并且过渡必须在 .after 中而不是叠加

.overlay {
  position: relative;
}
.overlay .after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  visibility: hidden;
  opacity:0;
  color: #000000;
  font-size:1.5em;
  font-weight:400;
  letter-spacing:-1px;
  padding-top:3em;
}

.overlay:hover .after {
  visibility: visible;
  opacity:1;
  background: rgba(255, 255, 255, .9);
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}

此处演示：https://jsfiddle.net/IA7medd/850hhcqd/

Answer 2

好吧，首先，CSS3 过渡无法为 display: none 属性设置动画。如果你想让叠加层淡入，我会使用 CSS opacity 属性。首先在 .overlay .after 上设置 opacity: 0;，然后在 .overlay:hover .after 中将不透明度设置为 1。这将使叠加层动画进出而不像 display: none 那样立即隐藏它做。

这是您的 CSS（经过格式化和编辑后可以使用）。覆盖元素是唯一改变不透明度的东西，我移动了一些东西以使其更有意义。

此处演示：http://codepen.io/anon/pen/dMBJML

.overlay {
  position: relative;
}

.overlay:hover {   
  opacity: 1;
}

.overlay .after { 
  opacity: 0;
  display: block;
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  color: #000000; 
  font-size:1.5em; 
  font-weight:400; 
  letter-spacing:-1px; 
  padding-top:3em;
  transition: all 0.6s ease-in-out; 
}

.overlay:hover .after {
  opacity: 1;
  background: rgba(255, 255, 255, .9); 
}

背景颜色不变 'smoothly'。 CSS 过渡无效

Background color not changing 'smoothly'. CSS transitions not working

css

transition

hover