Results 1 to 2 of 2

Thread: Looking for a hover effect for this image styling

  1. #1
    Join Date
    Sep 2008
    Location
    Seattle, WA
    Posts
    135
    Thanks
    1
    Thanked 11 Times in 11 Posts

    Default Looking for a hover effect for this image styling

    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!

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •