Welcome, fellow coders! Are you looking to add some visual flair to your website or web application? In this tutorial, we’ll explore how to create stunning CSS Glassmorphism Cards with Hover Effects. Glassmorphism is a popular design trend that involves creating a frosted glass effect in user interfaces, and it can add a sleek and modern look to your website. By the end of this tutorial, you’ll have the skills to create eye-catching Glassmorphism Cards that are sure to impress your users. So let’s dive in!
Before we start here are some more articles you might like to read-
- Pure CSS Magazine Layout with transitions
- Taking Screenshots using pyscreenshot in Python
- Static SPA build using ReactJS
- How to make a Keylogger using pynput
- 3D Book using HTML CSS and JavaScript
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous" />
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>CSS Glassmorphism Cards with Hover Effects - Coding Torque</title>
</head>
<body>
<!-- Further code here -->
<script src="script.js"></script>
</body>
</html>Paste the below code in your <body> tag.
<div class="container">
<div class="card">
<div class="content">
<div class="img"><img src="https://unsplash.it/200/200"></div>
<div class="cardContent">
<h3>Luis Molina<br><span>Web Developer</span></h3>
</div>
</div>
<ul class="sci">
<li style="--i:1">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</li>
<li style="--i:2">
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
<li style="--i:3">
<a href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
</li>
</ul>
</div>
<div class="card">
<div class="content">
<div class="img"><img src="https://unsplash.it/200/201"></div>
<div class="cardContent">
<h3>Someone Else<br><span>Grafic Designer</span></h3>
</div>
</div>
<ul class="sci">
<li style="--i:1">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</li>
<li style="--i:2">
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
<li style="--i:3">
<a href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>CSS Code
Create a file style.css and paste the code below.
$colors: (
one: #990033,
two: #161623,
negro: #020202,
blanco: #ffffff,
sombra: #000000
);
@function color($color-name) {
@return map-get($colors, $color-name);
}
@mixin displayFlex($justify,$align,$direction) {
display: flex;
justify-content: $justify;
align-items: $align;
flex-direction: $direction;
}
@keyframes colorful{
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
outline: none;
appearance: none;
border-style: none;
color: color(blanco);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,span,p {
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif;
}
html,
body {
width: 100%;
height: 100%;
background: color(two);
/*scrollbar-width: none;
overflow: hidden;
&::-webkit-scrollbar {
width: 0;
}*/
}
body {
position: relative;
overflow: hidden;
@include displayFlex(center, center, column);
padding: 2em;
&::-webkit-scrollbar {
background: color(negro);
width: 10px;
}
&::-webkit-scrollbar-track {
background: color(negro);
}
&::-webkit-scrollbar-thumb {
background: color(blanco);
border-radius: 1px;
}
&::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(#f00, #f0f);
clip-path: circle(30% at right 70%);
}
&::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(#2196f3, #e91e63);
clip-path: circle(20% at 10% 10%);
}
.container {
position: relative;
z-index: 1;
@include displayFlex(center, center, row);
flex-wrap: wrap;
padding: 1em;
.card {
position: relative;
width: 300px;
height: 400px;
margin: 1em;
background: rgba(255,255,255,0.05);
box-shadow: 0 15px 35px rgba(0,0,0,.2);
border-radius: 15px;
@include displayFlex(center, center, column);
backdrop-filter: blur(40px);
border: solid 2px transparent;
background-clip: padding-box;
box-shadow: 0px 10px 10px rgba(46, 54, 68, 0.03);
.content {
position: relative;
@include displayFlex(center, center, column);
opacity: 0.5;
transition: 0.5s;
.img {
position: relative;
width: 150px; height: 150px;
border-radius: 50%;
overflow: hidden;
border: 10px solid rgba(0,0,0,.25);
img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
}
}
.cardContent {
h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
font-size: 18px;
text-align: center;
margin: 20px 0 10px;
line-height: 1.1em;
span {
font-size: 12px;
font-weight: 300;
text-transform: initial;
}
}
}
}
.sci {
position: absolute;
bottom: 50px;
@include displayFlex(center, center, row);
li {
margin: 0 10px;
transform: translateY(40px);
opacity: 0;
transition: 0.5s;
transition-delay: calc(0.1s * var(--i));
a {
font-size: 24px;
}
}
}
&:hover .content {
opacity: 1;
transform: translateY(-20px);
}
&:hover .sci li {
transform: translateY(0px);
opacity: 1;
}
}
}
}Output Till Now
Written by: Piyush Patil
Code Credits: @luisoms
If you found any mistakes or have any doubts please feel free to Contact Us
Hope you find this post helpful💖
