CSS Image Rollover with Example
If you would like to create rollover effect by using only CSS i.e. a pure CSS Image Rollover effect, then this article is for you. In this article by using a simple example, I am going to show how to create Rollover effect for an image by simply using CSS and without any javascript or jQuery.
How to create CSS Image Rollover Effect?
Let’s look at the demo first:
Before Rollover:
After Rollover:
Example of Image Rollover using CSS
Let’s assume that you have a main “container” div that contains both the images i.e the image that needs to be shown by default and the roll over image as well. Take a look a the simple, easy to understand HTML & CSS code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example of Image Rollover using pure CSS</title>
<style type="text/css">
.container {
width: 300px;
}
.container .img_rollover {
width: 300px;
display: none;
}
.container:hover .img_rollover {
display: block;
}
.container:hover .img_default {
display: none;
}
</style>
</head>
<body>
<div class="container">
<img src="images/1.jpg" width="300" height="300" class="img_default">
<img src="images/2.jpg" width="300" height="300" class="img_rollover">
</div>
</body>
</html>Simple, isn’t it?
Do you know of any other ways to make CSS Image Rollover Effect? Feel free to suggest by commenting below.
P.S: If you would like to find out how to achieve Image Rollover effect using jQuery, then read my article on jQuery Image Rollover effect with example