Log in

View Full Version : Looking for a hover effect for this image styling



simcomedia
10-05-2008, 04:45 AM
I'm using this CSS to dress up my images in a gallery. What i'd like to do is create a hover effect for the thumbnails so the background-color changes to something slightly darker, for example.

Here's the code I have:

.imageBorder {
padding:7px;
background-color:#F5F4F2;
border:1px solid #c8c8c7;
margin: 5px;
text-decoration: none;
}

I'm also using this to remove any 'link' borders:

a img {border:none;}

The images are wrapped in a div with the class being the style above like so:

<a href="pagename.htm"><div class="imageBorder"><img src="nameofimage.jpg"></div></a>

I've experimented with all kinds of ideas but can't get it to change the background-color on hover. Help? Ideas? Thanks in advance!

bluewalrus
10-05-2008, 05:05 AM
#imageborder a:hover img {
padding:500px;
background-color:#FF0000;
}

this will make a 500px background in red around your image.
dont know if i named your div right but you can change that name and the color and sizing but that should be it

and move the imagborder on the outside of the a tag so the a is within the right div.