How To Create Simple Css Image Rollover Effect

Posted on by

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"]


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. 


[/code]

View Demo

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

24 thoughts on “How To Create Simple Css Image Rollover Effect”

  3. Pingback: 165+Need To Check Out Fresh Articles for Designers and Developers | tripwire magazine

  4. Pingback: CSS Brigit | How To Create Simple Css Image Rollover Effect

  5. Pingback: dot Blog. The week in links 15/02/10

  7. I’m having trouble adding 2 different hyperlinks within the text that rolls over. I want to link two words 2 separate places, but the CSS seems to only allow for one link. Any suggestions? Is this possible?

  13. Thanks for sharing. How would you do the same thing but using different images instead of the same one?

  18. Thank you so much for this tutorial. I have tried and tried to figure out how to make a symbol or text apear when hovering over an image. Thank you again.

  19. Great tutorial!!

    I managed to get this to work but I changed the CSS to show an image on hover. It works great on all browsers except for IE. Do you have any advice? Below is the adjusted code.

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

    — to

    .rollover_img a:hover {
    background: url(imagefile.png) ;
    }

    Thanks again!!
    Ed

Leave a Reply

Your email address will not be published.