#css effects

🛠️ How to Add These Codes

It is completely safe! If you don't like the result, you can just delete the code and your theme returns to normal.

Go to your blog and click Edit Appearance (the palette icon).

Click Edit Theme.

Scroll down the sidebar and look for "Advanced Options" or "Add Custom CSS". You may also put this under your <style> tag.

Paste ONE of the codes below into that box.

The Design Collection

01. Soft Corners

If your theme feels too "sharp," this softens the edges of every image.

img { border-radius: 30px; }

02. The Noir (B&W Reveal)

A classic look. Images are black & white until you hover over them.

img { filter: grayscale(100%); transition: 0.6s ease; } img:hover { filter: grayscale(0%); }

03. Ethereal (Fade In)

Images are slightly faded and transparent, blending into your background, until you look at them.

img { opacity: 0.6; transition: 0.6s ease; } img:hover { opacity: 1; }

04. Levitate (3D Lift)

Makes your blog feel tactile. Images float upwards when hovered.

img { transition: 0.4s ease; } img:hover { transform: translateY(-10px); }

05. The Vintage

Applies a warm, sepia-toned filter for that old-school aesthetic.

img { filter: sepia(50%) contrast(0.9); transition: 0.5s ease; } img:hover { filter: sepia(0%) contrast(1); }

06. The Mystery (Blur)

Great for text-heavy blogs. Images are out of focus until you want to see them.

img { filter: blur(4px); transition: 0.8s ease; } img:hover { filter: blur(0px); }

07. The Spotlight

Dims your images so your content pops, but lights them up when selected.

img { filter: brightness(80%); transition: 0.5s ease; } img:hover { filter: brightness(110%); }

08. The Zoom

A high-end fashion editorial look. The image subtly grows closer.

img { transition: 0.6s ease; } img:hover { transform: scale(1.05); }

09. The Cameo (Circle)

Automatically crops your square images into perfect circles with a cute border.

img { border-radius: 50%; border: 3px solid #ff99ac; transition: 0.5s ease; } img:hover { transform: rotate(10deg); }

10. The Snapshot (Polaroid)

Adds a white border and a casual tilt, like photos scattered on a desk.

img { border: 10px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: 0.4s ease; } img:hover { transform: rotate(-3deg) scale(1.03); }

11. The Pulse

A cute interaction. The image shrinks slightly, like a heartbeat or a button press.

img { transition: 0.5s ease; } img:hover { transform: scale(0.95); opacity: 0.8; }

12. The Candy (Vibrant)

Makes your colors super bright and saturated when hovered!

img { filter: saturate(100%); transition: 0.5s ease; } img:hover { filter: saturate(180%); border-radius: 50px; }

💡 Quick Tips

Don't paste them all! Pick just one effect for the best result.

Customize: You can change the numbers! For example, change 0.6s to 1s for a slower movement, or 30px to 10px for less rounded corners.

Happy editing! Let me know which one is your favorite! 💖

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.