Rollover Hover

What you will be learning.

Today you will be learning how to do a rollover hover! Now you may be asking what is a rollover hover and where can I use it? A rollover hover is a hover state that transitions from one picture to another! Now for where you can use it, it's perfect for before and afters like the one down below!

Example

Code Required

HTML Markup

   <span id="fader">
<img id="" src="../lib/img/2.png" alt=""/>
<img class="to" src="../lib/img/1.png" alt ""/>
</span>

CSS Markup

	#fader {
	position: relative
}
#fader .to {
	display: none;
	position: absolute;
	left: 0;
}

Javascript Markup 

$(document).ready(function(){
	$('#fader').hover(function(){
		$(this).find('img:eq(1)').stop(true,true).fadeIn();
	}, function(){
		$(this).find('img:eq(1)').fadeOut();
	})
});

Back