CODEWITHSUNDEEP
cssbuttonhover
Jonathan Grant
Jonathan Grant

Reputation: 143

making a:hover shrink the img

My button links are just links in the html with a background image in css. In the CSS I also have the dimensions of the image so that the whole thing is displayed.

I want the image to shrink to 95% whenever the mouse hovers over the image. I have the a:hover css but changing the dimensions to 95% there doesn't do it.

Is there an easy way to do this?

You can see the sample page at http://granthoneymoon.com/temp.html and the nav buttons are at the top inside the header.

Upvotes: 3

Views: 9418

Answers (1)

denicio
denicio

Reputation: 562

This should work:

a { transition: transform 0.5s; }
a:hover { transform: scale(0.95); }

You can change 0.5 to whatever timing suits you best. Also you would need to add specific -webkit-, -moz- and -o- prefix for older browser versions.

Upvotes: 6

Related Questions