How to Add Transparency and Hover Effects (Using Custom CSS)

Hey all!

In our previous posts, we have added custom colors to our text in ClickFunnels, created custom text size, and added strikethrough text.

In this video, I wanted to show you how you can use custom CSS code to add opacity (transparency), as well as create awesome hovering effects that allows the image to change transparency level when hovering over it with the mouse! These are awesome tools that are very popular in affiliate marketing and really sets you apart from the crowd, especially since they are not as straightforward as the rest of the ClickFunnels tools.

So to do this, you would basically need to first select whatever element you want to create the opacity effect for – it can be text, image, headline, WHATEVER! That’s the best part about it – this transparency technique using custom CSS does not discriminate!

After you select the item, click on the little gear icon and on the bottom left click on the ‘custom CSS’ tab. You need to copy that tag ID as that is the custom CSS element identifier and if we want to do any changes to that element, we need to know what the element ID is.

After we do that, we need to go to the ‘custom CSS’ tab on your top left (if using editor version 2 in ClickFunnels, or top right under ‘settings’ if not) and just paste that element ID we have just copied. We then need to add brace brackets (shift click the button to the right of P if using a PC) and create the command that we want. In this case, we need to add a command for adding opacity, so we need to say “opacity:xx” and enter any value for opacity you want. 1 being the most clear, and 0 being completely invisible. We then close that brace bracket and that’s it, we have finished out transparency!

But, we also need to create a hovering effect, so what we need to do is just copy the EXACT code you have just finished forming within the custom CSS space, and paste it just below. Then, right after your element ID, we need to write ‘:hover’, which gives the command to create a certain design upon hovering over that element. We then change our opacity again and make it whatever we want it to be when that element is hovered over.

That’s it!

Please follow the blog and stay tuned for future posts where go over the technical how-to’s and/or dig deeper into other affiliate marketing tools!

If you are interested in ClickFunnels, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
http://tinyurl.com/14-day-free-clickfunnels

If you like GetResponse and want to learn more, try out their 30-day free trial under my affiliate link at:
http://www.getresponse.com/index/Ambition

If you are interested in ClickMagick, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
http://www.bestlinktracker.com/ClickMagick/wp

Here is my Namecheap affiliate link as well if you want to buy one of their really cheap domains and/or private email:
https://www.namecheap.com/?aff=108439

Thanks for watching, and I’ll see you in the next post/video!

2 Replies to “How to Add Transparency and Hover Effects (Using Custom CSS)”

  1. Pingback: Affiliate Marketing Essentials

  2. Pingback: How to Create Background Gradients (Using Custom CSS) – Affiliate Marketing Essentials

Leave a Reply