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>
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
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!

Collapse
 
windyaaa profile image
Windya Madushani

Nice article.