CSS and JavaScript can be a powerful web design duo, working together to add both a presentation layer and a behavior layer to your site projects.
In this short tutorial, I will describe how to use CSS and a single image to create an image-switch hover effect. Then I will show you how to fade-in the second half of the image for a more unique user experience. In terms of skill level, this tutorial is aimed at new developers, web designers that wish to improve their JavaScript skills, and do-it-yourselfers.
See a Demonstration.
The Image
In essence, the CSS portion of our effect will change which image (which half of an image) a user sees when that user hovers over the picture. This would actually be quite simple to do using two images, but for users with slow Internet connections, there could be a momentary flicker if the second image was not preloaded. To avoid this issue, I’m using just one image, in this case it is a Stikfas Omega Male Knight product rendering in both color and grayscale.
The HTML
For our example, I am using a very simple HTML page. Note that I am calling an external stylesheet and that I have a <div> with the class, img-hover-wrapper, and an image with the class img-hover.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hover and Fade Effect</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div class="img-hover-wrapper">
<img src="stikfas-knight.png" alt="Stikfas Knight on a horse product image" class="img-hover" />
</div>
</body>
</html>
The CSS
Our stylesheet is very basic. I’ve added a margin to the page so that our image in not up against the top or left side of the client. Notice that for the <div>, I have set a width of 383 pixels, which is half the width of my image. With the overflow set to hidden, just half of my image will be visible when the page loads. Then using the class that I associated with my image, I change the margin when a user hovers over the picture.
This is all we needed for the basic effect. With just this CSS, the image will change when a user hovers the pointer over the picture.
body {margin: 100px 30%;}
.img-hover-wrapper {display: block; width:383px; overflow: hidden;}
.img-hover:hover {margin-left: -383px;}
The JavaScript
The effect I’ve created with the CSS is really not bad, and for many projects it will be all you need. But I want a transition that is not so abrupt, so I am going to use the jQuery JavaScript Library to fade in the second half of my image.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"/></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").hover(function () {
$("img.img-hover").css("opacity", .20);
$("img.img-hover").fadeTo(2000, 1);
});
return true;
});
</script>
There are two parts to the JavaScript on this page. First, I am calling in the external jQuery Library as found at the Google APIs site. Next, I am using two simple functions to create the visual effect I want.
The line $("img.img-hover").css("opacity", .20); adds opacity to the stylesheet for the image, so that when it is first visible to the user, it will be, well, dull or washed out.
The line $("img.img-hover").fadeTo(2000, 1); then fades the image to full opacity, represented by the “1.” The number “2000” tells jQuery how long in milliseconds the fade should take.
Summing Up
In this basic tutorial, I have quickly demonstrated how to create a two-part image switch and fade effect using CSS and JavaScript. I hope you found this tutorial helpful.
