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.
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");
});
});
