Super Cool Effect: Making Images Fade on Hover in WordPress

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.


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


On Hover – 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

Free Video Why 100 is NOT a Perfect Google PageSpeed Score (*5 Min Watch) Learn how to use Google PageSpeed Insights to set realistic goals, improve site speed, and why aiming for a perfect 100 is the WRONG goal.