CODEWITHSUNDEEP
csshovertransition
brianwellers
brianwellers

Reputation: 1

Smooth hover transition?

I seem to be having trouble with the animation aspect of a hover description. The hover itself works fine and appears exactly where it is placed; however, there seems to be no fade effect when hovering over or away from the element. Instead, the description box appears sharply within the 0.5s listed in the CSS, and disappears the same way. I'm looking to create a smooth, transitioning effect, where the description box fades in and out. Can someone please help me adjust this?

CODE:

#description {
    opacity:0;
    background:#fff;
    z-index:30;
    position:fixed;
    margin-left:249px; 
    margin-top:-5px; 
    border:1px solid #000; 
    width:230px; 
    height:299px;
    color:{color:text};
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out; }

#description a {
    color:{color:text};
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out; }

#sidebar:hover #description {
    opacity:0.6;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out; }

Upvotes: 0

Views: 56372

Answers (3)

lupoll88
lupoll88

Reputation: 159

Here is a live example on fiddle I just made

This is the HTML Markup

<div class="kid">
<img src="https://cleansites.us/images/katie-kid.jpg" alt="" width="600" height="750" />
<img src="https://cleansites.us/images/katie-adult.jpg" alt="" width="600" height="750" />
</div>

This is the CSS

.kid {
    max-width:250px;
    position:relative;
}

.kid img {
    display:block;
    opacity:1;
    height: auto;
    transition:.6s ease;
    width:100%;
    position:absolute;
    z-index:12;
}
.kid img:hover {
    opacity:0;
}
.kid img + img {
    display:block;
    opacity:1;
    position:relative;
    z-index:10;
}

Fiddle here: https://jsfiddle.net/cdsaekv9/7/

Upvotes: 0

Daniel C. Deng
Daniel C. Deng

Reputation: 1589

Tried it itself in my code. Just get rid off opacity and it will work. See youtiming dot com for demo.

'opacity' is a css property that you need to specify the level value: http://www.w3schools.com/cssref/css3_pr_opacity.asp

Upvotes: 0

user2411705
user2411705

Reputation:

Try this...

#description {
    opacity:0;
    background:#fff;
    z-index:30;
    position:fixed;
    margin-left:249px; 
    margin-top:-5px; 
    border:1px solid #000; 
    width:230px; 
    height:299px;
    color:{color:text};
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

#description a { color:{color:text}; }
#description:hover { opacity:0.6; }

Upvotes: 1

Related Questions