WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Themes» How to Fade Images on Mouseover in WordPress

How to Fade Images on Mouseover in WordPress

Last updated on February 26th, 2014 by Editorial Staff
49 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Fade Images on Mouseover in WordPress

Images increase user engagement on websites. This is why you need to optimize images, learn how to add beautiful image galleries, and fix any image issues on your site. There are many ways to make your images standout. One of them is using a fade effect on images. In this article, we will show you how to fade images on mouseover in WordPress.

Basically when the user brings their mouse over an image on your site, it will fade slightly. See the example screenshot below:

image fade effect

First we will show you is how to add simple fade effect on images in your WordPress posts. We will be using CSS for that. All you need to do is copy and paste the following code in your theme or child theme’s style.css file.

.post img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}

This CSS snippet will effect all images displayed in WordPress posts. However, there is a slight glitch in this snippet. When a user takes mouse over to an image, it instantly switches the opacity. This feels a bit rough, right? Lets make it a little smoother by adding CSS transition rules.

.post img:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

You can also reverse this effect by setting a lower default opacity for your images, and then easing into full opacity producing a glowing effect. All you need to do for that is use the following CSS in your stylesheet:

.post img {
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
.post img:hover{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Some of our users may not want to add this effect to all images in their posts. How about just featured images or post thumbnails? To add this effect to only your post thumbnails, you can use the default .wp-post-image class generated by WordPress for featured images. Simply replace .post img:hover with img.wp-post-image:hover.

You can tweak the opacity value or transition delay time to get your desired effect. We hope this article helped you learn how to fade images on mouseover in WordPress. Let us know what you think by leaving your feedback and questions in the comments below. Don’t forget to follow us on Twitter.

49 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

16 Comments

Leave a Reply
  1. Ubong Eshiet says:
    Dec 12, 2017 at 11:33 am

    this is a nice post it it help me to add some effect on post image but i was look for how to make my feature image zoom in and out when i hover on it please any help.

    Reply
  2. Patricia says:
    Feb 22, 2017 at 11:42 am

    Hello!
    I´m looking for a different hover effect, I need to change the image when the user hovers over it, can it be done?
    I really appreciate your guide on this!

    Reply
  3. Dja says:
    Dec 1, 2016 at 1:23 pm

    Thank you! Works like a charm!

    Reply
  4. Gabriel Njogu says:
    Mar 24, 2015 at 6:38 am

    Where in the style.css do I place the code

    Reply
    • ankush says:
      Apr 7, 2015 at 7:30 pm

      use a widget called simple custom css and paste the code there. you will find plugin in appearance after activation.

      Reply
  5. Justin says:
    Jul 24, 2014 at 9:24 pm

    Is it possible to apply this only to linked images? That would be a huge breakthrough for me! Thanks

    Reply
  6. Fabien says:
    Jul 11, 2014 at 2:59 am

    Nothing happen when I paste the code on my styl.css file.
    Where need i to paste the code in this file ?

    Reply
  7. Brent says:
    Jun 30, 2014 at 5:42 pm

    Great, really! How do you apply a white fade though?

    Reply
  8. TDot says:
    Jun 2, 2014 at 6:48 am

    Fantastic! Thanks a lot!

    Reply
  9. C Cook says:
    Mar 3, 2014 at 4:54 am

    I am a complete amateur but this works really well on my post pages – How do I amend the code for static pages?

    Reply
  10. Pancho Angarev says:
    Feb 26, 2014 at 10:52 am

    Thank’s for useful article:)

    Reply
  11. RW says:
    Feb 26, 2014 at 9:37 am

    Great post. I’ve even added black and white to the effect too with “grayscale” filters.

    Reply
  12. John says:
    Feb 26, 2014 at 9:13 am

    Thanks! That works excellent. I have not been using the transitions and that really makes it more elegant.

    Reply
  13. Fernando says:
    Feb 26, 2014 at 9:09 am

    How about other efffects like zooming?

    Reply
    • WPBeginner Support says:
      Feb 26, 2014 at 1:28 pm

      Sure we will try to cover them in some future article.

      Reply
  14. Daryl says:
    Feb 26, 2014 at 8:35 am

    Thanks for this simple breakdown of how to do this, I’m going to give this a try, if only to play with the different options and see how it affects things. Great stuff, thanks.

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
Smash Balloon
Smash Balloon
Add Custom Social Media Feeds in WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
Nextiva
Nextiva Coupon
Get the lowest possible price on the best VoIP and business phone service.
Webnus
Webnus Coupon
Get 20% OFF on Webnus themes and plugins for WordPress.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.