Red Glow Behind Image On Hover

Discussion in 'JavaScript' started by Pudge1, Feb 5, 2011.

0
  1. #1
    Notice that green glow around text boxes when you are selecting them on this forum?

    Here:
    [​IMG]

    How could I get a red glow behind an image when you hover over it?
     
    Pudge1, Feb 5, 2011 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    By using the new CSS3 box-shadow property. This should work:
    
<html>
<head>
<style type="text/css">
.glow:hover {
  box-shadow: 0 0 5px 2px #f00;
  -webkit-box-shadow: 0 0 5px 2px #f00; 
  -moz-box-shadow: 0 0 5px 2px #f00; 
}
</style>
</head>
<body>
<img class="glow" src="image.jpg" />
</form>
</body>
</html>
    Code (markup):
    1000 posts woot! :D
     
    Cash Nebula, Feb 6, 2011 IP
  3. thewantedhost

    thewantedhost Peon

    Messages:
    43
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I reallllyyyy need to look into CSS3.
    Especially now more up-to date browsers with increased support for it are coming out.
     
    thewantedhost, Feb 6, 2011 IP
  4. Pudge1

    Pudge1 Well-Known Member

    Messages:
    912
    Likes Received:
    6
    Best Answers:
    1
    Trophy Points:
    140
    Digital Goods:
    1
    #4
    Thanks! Works great!
     
    Pudge1, Feb 6, 2011 IP
  5. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You're welcome. :)

    Dang! I left a closing form tag in there. You certainly don't need that!
     
    Cash Nebula, Feb 6, 2011 IP