I have an image map and when the user hovers over the map I want to fade-in a small div with informations on the hovered content, then upon the mouse leaving the map fade-out with a two second delay.
-
2possible duplicate of fade effect using javascript no jquery?Andrew Walters– Andrew Walters2013-07-25 17:50:12 +00:00Commented Jul 25, 2013 at 17:50
-
Could clarify your question by adding informations on what you tried and what your actual issue is ?yadutaf– yadutaf2013-07-25 18:05:16 +00:00Commented Jul 25, 2013 at 18:05
Add a comment
|
2 Answers
It's possible to do a fade effect by animating opacity using CSS transitions:
.small_div {
opacity: 0;
-webkit-transition: opacity 1s;
-ms-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.small_div.active {
opacity: 1
}
To use this class, you will need to have some javascript to add the .active class when the image map is hovered and fill the .small_div with the necessary data.
IF you don't want to use a class, you can just change the opacity property directly using javascript and that change will also be animated.
Note that this will not work in older browsers like IE8, but it should degrade gracefully.
3 Comments
Bob
Could I change it by merely editing the style of the div with the script? Like, change the opacity and transition with a simple function?
Bob
That's not what I meant. Instead of making it active, can I directly affect the style of it?
nullability
Yes, that is possible. You don't need the active class; the transition will animate any changes to the opacity, so if you programmatically set the opacity to another value that will also work.
Unlike nullability suggests, you can do this fully with only CSS including the delay, no added classes involved. Here is a fiddle to prove it
HTML:
<div id='map'>
<div id='overlay'></div>
</div>
CSS:
#map {
height:100px;
width:100px;
background:red;
}
#overlay {
z-index:2;
background:black;
height:100px;
width:100px;
opacity:0;
-webkit-transition: opacity 1s;
-ms-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
transition-delay: 2s;
-webkit-transition-delay: 2s;
}
#overlay:hover {
opacity:.8;
transition-delay: 0s;
-webkit-transition-delay: 0s;
}
Comments
