#htmlcss

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.

<style> .whereinmnl-theme-card { position: relative; width: 300px; height: 200px; border-radius: 15px; overflow: hidden; margin: 20px auto; box-shadow: 0 5px 15px rgba(0,0,0,0.1); font-family: sans-serif; } .theme-image { width: 100%; height: 100%; background-size: cover; transition: 0.5s ease; } .theme-name { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; background: #fff; color: #00b4d8; text-align: center; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; z-index: 2; transition: 0.4s ease; } .theme-links { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 200, 221, 0.9); display: flex; justify-content: center; align-items: center; gap: 10px; clip-path: circle(0% at 50% 50%); transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1); z-index: 3; } .theme-links a { background: #fff; color: #00b4d8; padding: 8px 15px; border-radius: 20px; text-decoration: none; font-size: 11px; font-weight: bold; text-transform: uppercase; } .whereinmnl-theme-card:hover .theme-links { clip-path: circle(100% at 50% 50%); } .whereinmnl-theme-card:hover .theme-name { transform: translateY(100%); } .whereinmnl-theme-card:hover .theme-image { transform: scale(1.1); } </style> <div class="whereinmnl-theme-card"> <div class="theme-image" style="background-image: url('https://via.placeholder.com/600x400');"></div> <div class="theme-name">Nolza 2.0</div> <div class="theme-links"> <a href="/">Preview</a> <a href="/">Get Code</a> </div> </div>

HOW TO CUSTOMIZE:

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.