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.

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:

Step #1 Css Structure

first we create a Simple Css code

*{ padding:0; margin:0;}
body{ font:100% normal Arial, Helvetica, sans-serif;}


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


.rollover_img a {
color: #fff;
width: 280px;
height: 150px;
display: block;
text-decoration: none;
}


.rollover_img a:hover {
background:#000;
opacity:.60;
filter:alpha(opacity=60);
}


.rollover_img a span {
display: none;
width: 280px;
padding:5px;
}


.rollover_img a:hover span {
display: block;
}

Step #2 Html Structure

now we create a Simple Html code

<div class="rollover_img"><a title="Ace Infoway India" href="http://blog.aceinfowayindia.com">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed 
condimentum. In volutpat. Vestibulum elit. Aenean eget enim vitae 
tellus bibendum pellentesque. Sed at est. Example Text, Lorem ipsum 
dolor sit amet, consectetur adipiscing elit. </span>
</a></div>

View Demo

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

Filed under: Css, Tutorials by admin