DEV Community

Cover image for Glassmorphism Card Hover Effect
Jon Snow
Jon Snow

Posted on Edited on

Glassmorphism Card Hover Effect

Glassmorphism Card Hover Effect


Video Tutorial

Don't miss the amazing video we've embedded in this post! Click the play button to be inspired


HTML Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphism Card</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="card">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="card-inner"></div>
    </div>

</body>

</html>
⚽ Live Match: jon snow/glassmorphism card hover effect jo - Info Live Streaming 2026 ⚽ Live Match: jon snow/glassmorphism card hover effect jo - Info Live Streaming 2026

Full Source Code



Check Our Latest Post


Thanks for Reading ❤️! Check my website Demo coding for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!

Don't forget to subscribe to our channel : Demo code


Top comments (2)

⚽ Live Match: jon snow/glassmorphism card hover effect jo - Info Live Streaming 2026
 
iamhectorsosa profile image
Hector Sosa •

Nice post! Some screenshots with examples would be a great resource as well! We've built an OSS tool to help with this. Feel free to check it out and let us know what you think github.com/ekqt/screenshot We'd appreciate giving it a Star on GitHub if you find it helpful! Cheers!

⚽ Live Match: jon snow/glassmorphism card hover effect jo - Info Live Streaming 2026
 
windyaaa profile image
Windya Madushani •

Nice article.