• Article Written 
  • on 13.02.2010
  •  at 06:49 AM
  •  by admin

How To Create Simple Css Image Rollover Effect

A few days ago I was implementing Image Rollover Effect in a website I’m working on. Most of the portfolio websites are using image rollover effect. In this tutorial i will learn you how to create simple Css image rollover effect . I am using only one simple graphic. The rest is basic CSS styling, with simple HTML code.


[ad#co-1]
image-rollover-heading

This Rounded border property is not supported by IE. View Demo

let us know your thoughts? If you found any other tutorials that you want to share with us,feel free to let us know by dropping in a comment.

Example:

image-rollover

Step #1 Css Structure

first we create a Simple Css code

[code lang="css"]
*{ padding:0; margin:0;}
body{ font:100% normal Arial, Helvetica, sans-serif;}
[/code]
[code lang="css"]
.rollover_img {
width: 280px;
height: 150px;
background-image: url(land.jpg); 
background-position: top;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:10px solid #ccc;
font:13px normal Arial, Helvetica, sans-serif;
line-height:18px;
float:left;
margin:0 10px 10px 0;
}
[/code]
[code lang="css"]
.rollover_img a {
color: #fff;
width: 280px;
height: 150px;
display: block;
text-decoration: none;
}
[/code]
[code lang="css"]
.rollover_img a:hover {
background:#000;
opacity:.60;
filter:alpha(opacity=60);
}
[/code]
[code lang="css"]
.rollover_img a span {
display: none;
width: 280px;
padding:5px;
}
[/code]
[code lang="css"]
.rollover_img a:hover span {
display: block;
}
[/code]

Step #2 Html Structure

now we create a Simple Html code

[code lang="htmlstrict"]

[/code]

View Demo

Follow us on Twitter, or subscribe to the Developers Paradise+ RSS Feed for the best web development tutorials on the web.

Promote Us

  • Add to Mixx!
Ace Hosting India

Tags: ,