DEV Community

Cover image for Glassmorphism Card Hover Effect
Jon Snow
Jon Snow

Posted on • Edited on

4 3 3 3 3

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


Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

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.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay