CODEWITHSUNDEEP
htmlcss
jessica
jessica

Reputation: 1687

Making border of image red on hover

I'm trying to making the border of the an image to be red when on hover, but it's not working for some reason. What am I doing wrong?

img: hover {
border: 1px solid red;
}
<img src = 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>

Upvotes: 1

Views: 54

Answers (2)

Robbert
Robbert

Reputation: 6592

Remove the space after the colon. It works in Chrome and IE11, at least.

img { border: 1px solid white; } 
img:hover {
border: 1px solid red;
}
<img src = 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>

EDIT: As mentioned in another answer, you may want to add a white border around the image so it won't shift when you hover over it. I have incorporated that in the code snippet above.

Upvotes: 4

vandijkstef
vandijkstef

Reputation: 414

Cant comment, but we are talking CSS here, not HTML.

Add in a border for default to fix jumpy image. U could do

img { border: 1px solid rgba(0,0,0,0); }

Upvotes: 2

Related Questions