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 not overlay

之后

.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属性。首先在opacity: 0;上设置.overlay .after，然后在.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); 
}

背景颜色不会'平滑'变化。 CSS转换不起作用

2 个答案: