Clever Geek Handbook

CSS hover transitions not working

I am having problems getting any form of transition to this hover. I want it to appear a little slower than just cool when hovering over it. So maybe just a delay? Or ease? Anyway, I cannot get any of these things to work.

.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>
Run codeHide result


+3


source to share


2 answers


Instead of using "visibility: hidden", try changing only the opacity, for example:

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

Then enter the jump code in the description field:

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

The description field now has a transition property, and when the image hovers, the new opacity is applied (with the transition time set in the original class). This new opacity class is then removed when the mouse leaves the area.



Make sure you remove

visibility: hidden;

from source, or you won't see anything! (It messed me up at first when I tried to fix it)

Here is a JSfiddle daemon for demo

+1


source 




.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>
Run codeHide result


0


source






More articles:


All Articles