SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

  Web Programming JavaScript jQuery Color Fade Hover Effect

jQuery Color Fade Hover Effect

photoshop-plus JavaScript Jun 08, 2012

About The Effect

The effect is pretty simple, its basically two images on top of each other positioned using CSS. When a user places there mouse over the image jQuery fades the top image out revealing the colored image underneath. The same effect can be pulled off wit HTML5 but i believe there is a lot more coding involved, its a subject i may touch on in the future.

Greyscale To Color Transition

Getting Started...

Create a new HTML file with the latest jQuery libary and a stylesheet attached..

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<title>Greyscale To Color jQuery Transition</title>

<link href="styles.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

</head>
<body>

</body>
</html>

Inside the body of the HTML document create a simple un-ordered list. Inside each list insert two images of the same size, one should be in color and the other in greyscale. If you want the effect to be "greyscale to color" then place the grey image in the list first, if you want the effect to be "color to greysale" then place the images the other way round.

Give each colored image a class of "color" and each grey image a class of "grey". The code should look like this.

<ul class="gallery">
<li>
<img src="images/01_grey.gif" class="grey" />
<img src="images/01_color.gif" class="color" />
</li>

<li>
<img src="images/02_grey.gif" class="grey" />
<img src="images/02_color.gif" class="color" />
</li>
</ul>

The CSS Styles

Inside the stylesheet add the following CSS styles.

.gallery li {
	float: left;
	margin-right: 20px;
	list-style-type: none;
	margin-bottom: 20px;
	display: block;
	height: 130px;
	width: 130px;
	position: relative;
}

img.grey {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}

img.color {
	position: absolute;
	left: 0; top: 0;
}

The styles for the list (.gallery li) are just positioning each list in a row, the most important style is the "Position: Relative" style without this style the gallery images will just be on top of each other.

The most important set of styles are the classes that are assigned to the images.

The jQuery

Create a blank .js file then copy and paste the code below.

$(document).ready(function(){
$("img.grey").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});

Save the .js file as "Transition" inside a folder called "JS". Once saved link the JS file in the head of the HTML file.

<script type="text/javascript" src="js/transition.js"></script>

The jQuery code basically says, once you hover over an image with a class of grey lower the opacity to 0%, revealing the image underneath.

$(document).ready(function(){
$("img.grey").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},

The next part brings the opacity back to 100% when the mouse is moved off the image.

function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});

   

ABOUT THE AUTHOR

Richard Carpenter Hi! Im Richard Carpenter and Im a Freelance Web and Graphics Designer from England. I am also a Regular Blogger, Tutorial Writer, and owner of Photoshop Plus. Photoshop Plus is his 2nd personal blog about all things photoshop. On a weekly basis he write tutorials, articles and freebies.
subscribe to newsletter