{"id":125601,"date":"2014-02-07T11:53:00","date_gmt":"2014-02-07T16:53:00","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=125601"},"modified":"2014-02-08T13:54:25","modified_gmt":"2014-02-08T18:54:25","slug":"fade-images-on-hover-wordpress","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/fade-images-on-hover-wordpress\/","title":{"rendered":"Super Cool Effect: Making Images Fade on Hover in WordPress"},"content":{"rendered":"

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.<\/p>\n

\n
\"feature\"<\/div>\n
<\/div>\n<\/div>\n

Fading Images Code<\/b><\/h2>\n

There\u2019s not a lot to this. Simply go to your style sheet and insert the following CSS code. (Appearance > Editor > Stylesheet – style.css)<\/p>\n

Of course it\u2019s always best to use a child theme<\/a> if you\u2019re going to be changing your site\u2019s theme files.<\/p>\n

img {\r\n opacity: 1.0;\r\n transition: opacity 1s ease-in-out;\r\n -moz-transition: opacity 1s ease-in-out;\r\n -webkit-transition: opacity 1s ease-in-out;\r\n }\r\n a:hover img {\r\n opacity: .6;\r\n transition: opacity .55s ease-in-out;\r\n -moz-transition: opacity .55s ease-in-out;\r\n -webkit-transition: opacity .55s ease-in-out;\r\n }<\/pre>\n
And here\u2019s the result.<\/p>\n
Original \u2013 No Fade<\/h3>\n
\n
\"no-fade\"<\/div>\n<\/div>\n
On Hover – Fade<\/h3>\n
\n
\"fade\"<\/div>\n<\/div>\n
If you\u2019d like to make the image fade out even more (or maybe less), then play with the .6 number here:<\/p>\n
opacity: .6;<\/pre>\n
Making that number lower, for example .3, will fade the image even more. Making it higher, for example .8, will give you less fade.<\/p>\n
Thanks to Luis on stackflow<\/a> for the basic code here.<\/p>\n
Photo credit: Radcliffe Bridge, 19th<\/sup> century<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
This little trick will add an air of sophistication to your site.<\/p>\n","protected":false},"author":84404,"featured_media":125839,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[16],"tutorials_categories":[],"class_list":["post-125601","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-images"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/125601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84404"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=125601"}],"version-history":[{"count":1,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/125601\/revisions"}],"predecessor-version":[{"id":216515,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/125601\/revisions\/216515"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/125839"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=125601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=125601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=125601"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=125601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}