• 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.



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.

Be Sociable, Share!
If you enjoyed this post, make sure you subscribe to my RSS feed!

Promote Us

  • Add to Mixx!
Ace Hosting India

Tags: ,

Untitled Document

23 Comments

  1. Really nice effect! Good tutorial!
    .-= Codesquid´s last blog ..Flags of the world using only XHTML and CSS =-.

  2. This article has been shared on favSHARE.net. Go and vote it!
    .-= favSHARE´s last blog ..5 iPhone Apps Every Web Designer Should Have =-.

  3. [...] How To Create Simple Css Image Rollover Effect [...]

  4. How To Create Simple Css Image Rollover Effect…

    A few days ago I was implementing Image Rollover Effect in a website Im 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 on…

  5. [...] How to create a simple CSS image rollover effect (aceinfowayindia​.com) [...]

  6. cool man ,was thinking to add this,. am gonna add this now. thanks for the share :p
    .-= ashwin´s last blog ..How to Download Facebook Videos? 3 ways =-.

  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?

  8. How do you justify the text on hover?

  9. Cool bro, but I need a very simple css code for hover. anyway thanks for this.
    .-= gtagamer´s last blog ..GTA 4 Mega Super Jump Script Mod =-.

  10. Thanks, very easy to understand and implement.
    Really cool :) Keep the good job

  11. Great effect. This will certainly come in handy. Thankyou.

    George

  12. this is super nice..

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

  14. This looks great, adds a really nice effect to images very easily.

  15. Thanks! nice post

  16. Nice & easy. :) Wonderful tutorial, bookmarked for implementation!

  17. Awesome article for me, since I’m always looking for better and cleaner methods

  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

  20. Hi

    I’m useless at this sort of thing but I almost got this working. However my text is appearing outside of the image box. I’ve uploaded the half finished website here, can anyone help? Scroll over the image of Kurt Cobain to see.
    http://www.spring-creative.co.uk/ian/

  21. Hello,
    How would you adapt this for a Responsive Design site?
    thanks,
    Carol

  22. Thanks for post. Very helpful and fine collection.

  23. Thanks alot, very good article

Submit a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge