Hover Border

Discussion in 'HTML & Website Design' started by Richard K, Jan 26, 2008.

  1. #1
    http://www.randy-orton.com/elites.php

    Hey,

    If you click that link and hover over one of the images, you can see that a border appears. I'd really like to use this feature on Naruto Pictures but I'm not sure how to do it. Please try and help me, I'd appreciate it :cool:
     
    Richard K, Jan 26, 2008 IP
  2. walkere

    walkere Active Member

    Messages:
    112
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #2
    You just need a simple bit of CSS to achieve that effect...

    a.image-with-border:hover {
       border: thin solid black;
    }
    Code (markup):
    Any link (anchor tag) can have a hover effect applied to it with the declaration a:hover. In this case I added a class to it (image-with-border), because you probably don't want every anchor tag on the page to be styled that way.

    Match that class to the anchor tags wrapped around your images.

    Then give it the styling you want - in this case a thin solid black border. Customize to your liking, and you should be good to go.

    Good luck,
    - Walkere

    Edit: If you want to apply a hover to an image without a link, you still need to wrap an anchor tag around it (img:hover won't work in IE). To do so just create an anchor without a link - <a href="#"><img /></a> should work.
     
    walkere, Jan 26, 2008 IP
  3. Richard K

    Richard K Guest

    Messages:
    462
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you, that's great!
     
    Richard K, Jan 26, 2008 IP