TUTORIAL: CSS "Curtain" Reveal Effect for Theme Cards
Hi everyone! 💖
I received a request asking how to code the specific hover effect I used on my previous theme boutique, so I decided to make a quick tutorial for it!
This is a "Curtain" Reveal Effect. When you hover over the card, a pink overlay opens up in a circular motion (like a curtain!) to reveal your links, while the image zooms in slightly. It’s perfect for theme creators who want a cute, interactive way to display their work.
🎥 Check out the video attached to see the live preview!
How to use it: It’s super simple. You don't need to install any heavy scripts. Just COPY + PASTE the code below into your HTML where you want the effect to appear.
To change the Image: Look at the very bottom of the code in the HTML part. Find the line that says background-image: url('...'). Simply replace the link inside the quotation marks with the direct link to your own image.
To change the "Curtain" Color (Pink): Scroll up to the section and look for .theme-links. Find the line background: rgba(255, 200, 221, 0.9);. You can change the RGB numbers or replace the whole code with a hex code (like #000000) of your choice!
To change the Text Color: Look for #00b4d8 (the blue color) inside .theme-name and .theme-links a. Replace this code with any color you want for the title and the buttons.
DISCLAIMER: This code was written by me based on a design I previously used for my own projects. While the concept of a circular reveal exists in web design, this specific implementation is my own coding. You are free to use this in your personal or commercial themes! Credits to whereinmnl are appreciated but not strictly required. Please do not repost this tutorial or claim the code as your own.
