Цвет фона не меняется «плавно». Переходы 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; 
} 

Demo здесь: 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); 
}