Glassmorphism Card Hover Effect

This content originally appeared on DEV Community and was authored by Jon Snow

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>

CSS Code

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-color: #212121;
    margin: 0;
}

.card {
    width: 190px;
    height: 254px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}

.card-inner {
    width: inherit;
    height: inherit;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    border-radius: 8px;
}

/* Visit https://democoding.in/ for more free css animation */
.card:hover {
    transform: scale(1.04) rotate(1deg);
}

.circle {
    width: 100px;
    height: 100px;
    background: radial-gradient(#b0e633, #53ef7d);
    border-radius: 50%;
    position: absolute;
    animation: move-up 2s ease-in infinite alternate-reverse;
}

.circle:nth-child(1) {
    top:-25px;
    left:-25px;
}

.circle:nth-child(2){
    bottom: -25px;
    right: -25px;
    animation: move-down;
}

@keyframes move-up {
    to {
        transform: translateY(-10px);
    }
}
@keyframes move-down {
    to {
        transform: translateY(10px);
    }
}

Check Our Latest Post

Glassmorphism CSS Generator

Jon Snow ・ Apr 30 ・ 1 min read

#webdev #css #programming #productivity

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

Jon Snow

@alarmssnooze

Recruiters are like:
"We are looking for a rockstar frontend developer that can write machine learning algorithms in HTML"

07:18 AM - 09 May 2023

This content originally appeared on DEV Community and was authored by Jon Snow

Print Share Comment Cite Upload Translate Updates

APA

Jon Snow | Sciencx (2023-05-17T15:59:00+00:00) Glassmorphism Card Hover Effect. Retrieved from https://www.scien.cx/2023/05/17/glassmorphism-card-hover-effect/

MLA

" » Glassmorphism Card Hover Effect." Jon Snow | Sciencx - Wednesday May 17, 2023, https://www.scien.cx/2023/05/17/glassmorphism-card-hover-effect/

HARVARD

Jon Snow | Sciencx Wednesday May 17, 2023 » Glassmorphism Card Hover Effect., viewed ,<https://www.scien.cx/2023/05/17/glassmorphism-card-hover-effect/>

VANCOUVER

Jon Snow | Sciencx - » Glassmorphism Card Hover Effect. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/05/17/glassmorphism-card-hover-effect/

CHICAGO

" » Glassmorphism Card Hover Effect." Jon Snow | Sciencx - Accessed . https://www.scien.cx/2023/05/17/glassmorphism-card-hover-effect/

IEEE

" » Glassmorphism Card Hover Effect." Jon Snow | Sciencx [Online]. Available: https://www.scien.cx/2023/05/17/glassmorphism-card-hover-effect/. [Accessed: ]

rf:citation

» Glassmorphism Card Hover Effect | Jon Snow | Sciencx | https://www.scien.cx/2023/05/17/glassmorphism-card-hover-effect/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.