How to Change Image Transparency in CSS


It is nice to have your images change their transparency. It is useful especially when the images are linked to social media or other outbound sites and you want to emphasize this fact. I will show you how to do this in two simple steps.

Edit Your Stylesheet

Add the following lines of code to your stylesheet. Do it by clicking Appearance > Edit CSS in your WordPress Dashboard, in case you have Jetpack installed. Otherwise, add them to your theme’s stylesheet — style.css, via your WordPress Dashboard’s Appearance > Editor.

Use HTML Styling

Now you can call the opac80 CSS class with any image anywhere on your website, be it in a post or in a sidebar widget. All you have to do is enclose the image in division <div></div> or paragraph <p></p> tags.

Try it out by hovering with your mouse over the purple BUTTON image and its opacity will decrease to 80%.


Of course, you can change the level of opacity in the above CSS code. Just be sure to change all numbers evenly.

And here is the HTML code to call the opac80 CSS class:

A nifty trick, isn’t it? I hope that the above explanation is straightforward enough. But just in case, if you have trouble implementing it in your WordPress installation, let me know and I’ll take a look.

Final Thoughts

Do you change the transparency on your social media buttons or elsewhere on your site? Do tell. I am looking forward to your comments.

Liked this post?

Subscribe to our newsletter to receive early notification of new posts and deals:
[mc4wp_form id=”45″]

Next Post »« Previous Post