WordPress Trick: Make Images Fade On Hover

Making images fade on hover is a little trick I first saw in Tung Tran’s blog right sidebar: Cloud Living.

Make images fade on hover

It adds a subtle but very persistent air of sophistication to your wordpress blog, giving your blog a super cool effect.

I wanted to implemented this when I first saw this but not until now do I have little time to give it a try.

Codes to Make Images Fade on Hover

In order to get this effect, we only need to do some tweaks on the CSS. You can either edit your style.css directly by inserting following codes or add these codes to your custom CSS file.

Tips: It’s always recommended to use a child theme if you are going to modify the theme file.


You can play with the number .6 here if you want it fade more or less.

Also you can control the speed of the fade process by changing .55s. Making this number lower, for example .25s, it will be fading faster.
Above codes will make all images in your blog fade, which may be not what you want. You just want images on certain section, for example on the sidebar, to fade. I myself add

tag to the codes so only images on the widget area have this cool effect.
My codes are:

Remember to replace

to your own specific tag.

– See more at: https://web.archive.org/web/20140304231702/http://smallseotips.com:80/2014/02/wordpress-trick-make-images-fade-hover/#sthash.mpqiG1f8.dpuf

Leave a Reply

Your email address will not be published. Required fields are marked *