CSS Переход не работает соответственно

Question

Не уверен, что я делаю неправильно здесь. Наведение, безусловно, работает, поскольку свойства top и bottom меняются, но перехода просто нет.

.info{ 
    position:absolute; 
    transition: opacity 2s; 
    top:0px; 
    bottom:0px; 
    right:0px; 
    left:0px; 
    background:rgba(0,0,0,0.8); 
    color:white; 
    text-align:center; 
    justify-content:center; 
    display:none; 
    opacity:0; 
} 


.content ul li:hover .info{ 
    top:-10px; 
    bottom:10px; 
    opacity:1; 
    display:flex; 
} 

Использование нефрита, вот разметка

div.content 
     ul 
     each item in results2 
      li 
      img(src='images/portfolio/#{item.image_path}') 
      div.info 
       span #{item.title} 
       p #{item.description} 

Любая помощь будет принята с благодарностью :)

Answer 1

То есть из-за свойства display (display:none), который вы указали. Если вы удалите display:none, он должен просто отлично работать. display Свойство не может быть изменено.

Try:

.info{ 
    position:absolute; 
    transition: opacity 2s; 
    top:0; 
    bottom:0; 
    right:0; 
    left:0; 
    background:rgba(0,0,0,0.8); 
    color:white; 
    text-align:center; 
    justify-content:center; 
    opacity:0; 
}