Super Cool Effect: Making Images Fade on Hover in WordPress

Making your images fade on hover is really a very little trick in terms of implementation. The result, however, adds a subtle but very persistent air of sophistication to your site, a small thing that usually only a very conscientious theme designer might do.

feature

Fading Images Code

There’s not a lot to this. Simply go to your style sheet and insert the following CSS code. (Appearance > Editor > Stylesheet – style.css)

Of course it’s always best to use a child theme if you’re going to be changing your site’s theme files.

img {
 opacity: 1.0;
 transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -webkit-transition: opacity 1s ease-in-out;
 }
 a:hover img {
 opacity: .6;
 transition: opacity .55s ease-in-out;
 -moz-transition: opacity .55s ease-in-out;
 -webkit-transition: opacity .55s ease-in-out;
 }

And here’s the result.

Original – No Fade

no-fade

On Hover – Fade

fade

If you’d like to make the image fade out even more (or maybe less), then play with the .6 number here:

opacity: .6;

Making that number lower, for example .3, will fade the image even more. Making it higher, for example .8, will give you less fade.

Thanks to Luis on stackflow for the basic code here.

Photo credit: Radcliffe Bridge, 19th century