When images are links, it’s a nicer effect to adjust the image opacity when a user hovers over the image.
This signifies to the user that something will happen when the image is clicked.
Use the CSS below for image opacity on hover with a gradual ease-in-out effect.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
a img { opacity: 1; filter: alpha(opacity=100); transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } a:hover img { opacity: .65; filter: alpha(opacity=65); transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } |
