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
Use HTML Styling
Now you can call the
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
<img class="opac80" src="hover-button.png" />
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.
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: