Переходы CSS hover не работают

Question

У меня возникают проблемы с получением какой-либо формы перехода на этот наведение. Я хочу, чтобы он казался немного медленнее, чем просто круто, когда он парил над ним. Так может быть, просто задержка? Или легкость? Во всяком случае, я не могу заставить любую из этих вещей работать.

.forum-image { 
 
float: left; 
 
width: 75%; 
 
overflow: auto; 
 
position: relative; 
 
opacity: 1; 
 
transition: opacity 0.3 ease-in; 
 
-webkit-transition: opacity 0.3 ease-in; 
 
background-color: #dcdcdc; 
 
} 
 

 
.forum-image:hover .descriptionbox { 
 
visibility: visible; 
 
} 
 

 
.descriptionbox { 
 
opacity: 0.8; 
 
background-color: #FFF; 
 
width: 100%; 
 
height: 100%; 
 
visibility: hidden; 
 
position: absolute; 
 
top: 0; 
 
bottom: 0; 
 
left: 0; 
 
right: 0; 
 
box-sizing:border-box; 
 
-moz-box-sizing:border-box; /* Firefox */ 
 
padding: 10px; 
 
}

<div class="forum-image"> 
 
    <img src="http://i.imgur.com/VwTgk9a.png"> 
 
    <div class="descriptionbox"> 
 
     Testtesttest 
 
    </div> 
 
</div>

Answer 1

Вместо того, чтобы использовать "видимость: скрытый" попробуйте изменить только непрозрачность, например, так:

.forum-image:hover .descriptionbox { 
    opacity: 0.8; 
} 

, а затем положить код перехода на поле Описание:

.descriptionbox { 
    /* Other properties... */ 
    padding: 10px; 
    opacity: 0; /* Start opacity at 0, changes when hovered... */ 
    transition: opacity 0.3s ease-in; 
} 

Теперь окно описания имеет tr ansition, и когда изображение зависнет, применяется новая непрозрачность (с временем перехода, установленным в исходном классе). Затем этот новый класс непрозрачности удаляется, когда мышь выходит из области.

Убедитесь, что вы удалите

visibility: hidden; 

из исходного кода, или вы никогда не увидите ничего! (Это испортили меня в первом, когда я пытался это исправить)

Here is a JSfiddle for demonstration

Answer 2

.forum-image { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.descriptionbox { 
 
    position: absolute; 
 
    background: #ffffff; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    opacity: 0; 
 
    
 
    -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */ 
 
    transition: opacity 1s; 
 
} 
 

 
.descriptionbox:hover { 
 
    opacity: 1;  
 
}

<div class="forum-image"> 
 
    <img src="http://i.imgur.com/VwTgk9a.png" /> 
 
    <div class="descriptionbox"> 
 
     Testtesttest 
 
    </div> 
 
</div>