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.
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.
Promote Us
Related Articles:
if you enjoyed reading this article, please check out other related articles below:
Loading...
Codesquidsays on : February 13th, 2010 at 10:12 am Said:
Really nice effect! Good tutorial!
Codesquid´s last blog ..Flags of the world using only XHTML and CSS
favSHAREsays on : February 13th, 2010 at 11:51 am Said:
This article has been shared on favSHARE.net. Go and vote it!
favSHARE´s last blog ..5 iPhone Apps Every Web Designer Should Have
165+Need To Check Out Fresh Articles for Designers and Developers | tripwire magazinesays on : February 13th, 2010 at 2:43 pm Said:
[...] How To Create Simple Css Image Rollover Effect [...]
CSS Brigit | How To Create Simple Css Image Rollover Effectsays on : February 13th, 2010 at 9:56 pm Said:
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…
dot Blog. The week in links 15/02/10says on : February 15th, 2010 at 11:03 am Said:
[...] How to create a simple CSS image rollover effect (aceinfowayindia.com) [...]
ashwinsays on : June 19th, 2010 at 9:09 am Said:
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
Megansays on : November 9th, 2010 at 3:24 am Said:
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?
Melissasays on : December 6th, 2010 at 8:11 pm Said:
How do you justify the text on hover?
gtagamersays on : January 21st, 2011 at 1:04 pm Said:
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
Karlsays on : May 31st, 2011 at 3:24 pm Said:
Thanks, very easy to understand and implement.
Keep the good job
Really cool
Georgesays on : June 16th, 2011 at 1:26 pm Said:
Great effect. This will certainly come in handy. Thankyou.
George
html5 designsays on : June 28th, 2011 at 7:14 am Said:
this is super nice..
Stevesays on : July 25th, 2011 at 8:30 pm Said:
Thanks for sharing. How would you do the same thing but using different images instead of the same one?
Brentsays on : August 21st, 2011 at 12:23 am Said:
This looks great, adds a really nice effect to images very easily.
Viveksays on : January 21st, 2012 at 2:37 pm Said:
Thanks! nice post
Facebook Coverssays on : February 29th, 2012 at 7:12 am Said:
Nice & easy.
Wonderful tutorial, bookmarked for implementation!
Joomla Developer Nepalsays on : March 27th, 2012 at 3:06 pm Said:
Awesome article for me, since I’m always looking for better and cleaner methods
Brandonsays on : March 30th, 2012 at 3:41 pm Said:
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.
Edsays on : May 15th, 2012 at 9:37 pm Said:
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
Bobsays on : June 9th, 2012 at 2:58 pm Said:
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/
Carolsays on : March 13th, 2013 at 10:43 pm Said:
Hello,
How would you adapt this for a Responsive Design site?
thanks,
Carol
mamunsays on : April 8th, 2013 at 3:28 pm Said:
Thanks for post. Very helpful and fine collection.
ahmad balavipoursays on : April 27th, 2013 at 5:44 am Said:
Thanks alot, very good article