CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3557085
user3557085

Reputation: 27

Hover image and glows [Bootstrap]

How would I make the image glow when hover? I would like to use white-color.

<a href="mailto:[email protected]"><img src="resources/img/email.png"  class="img-circle"></a>

image:

https://i.sstatic.net/Hx0kH.png

Can't post link. So, I would like to make it glow (inside), thanks. Any help would be great

Upvotes: 2

Views: 1764

Answers (3)

Siddharth Pandey
Siddharth Pandey

Reputation: 669

You can use box-shadow withInset property

.shadow { -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; }

Upvotes: 1

Amanjot
Amanjot

Reputation: 2058

You can give glow at the borders using

img:hover
{
-moz-box-shadow: 0 0 5px 5px #ddd;
-webkit-box-shadow: 0 0 5px 5px #ddd;
box-shadow: 0 0 5px 5px #ddd;
}

You can choose the color you want according to your requirements. you can also visit http://codepen.io/anon/pen/ilqnb or http://css3generator.com/

Upvotes: 1

cosmycx
cosmycx

Reputation: 124

I think what you are trying to do is accomplished with two versions of the same image (use of photo editing tools). Then use this code:

<img src="URL of darker image here"
         onmouseover="this.src='URL of lighter image';"
         onmouseout="this.src='URL of darker image here';">
</img>

Upvotes: 1

Related Questions