Create rollover image in css

Author: PiticStyle Author's URL: www.piticstyle.com More by this author

Added:Apr 27, 2010 Rating:

Level: Beginner Software: Dreamweaver

Create Rollover Image in CSS ( You can see the final result here )

I made two buttons for this tutorial, save it if you want to work with them.

1. Open Notepad and type the next code:

<html>
<head>
<style type="text/css">
a.image {
display: block;
width: 300px;
height: 200px;
background-image: url(Home1.jpg);
background-repeat: no-repeat;
}
a.image:hover {
background-image: url(Home2.jpg);
}
</style>
</head>
<body>
<center>
<a class="image" href="http://www.piticstyle.com" mce_href="http://www.piticstyle.com" target="_blank"></a>
</center>
</body>
</html>

2. Click on File > Save as and save like HTML

3. Go in the location where you save your page and open it

Create Rollover Image in CSS

Note: If your images don't appear the problem is in the location where you save it your page. The images and index.html will need to be together, same location or same folder. Thank you!