Glassmorphism Christmas Card with Hover Effect using HTML, CSS & JavaScript

Glassmorphism Christmas Card with Hover Effect using HTML, CSS & JavaScript

Hello developers, today in this blog, you'll learn to create a Glassmorphism Christmas Card with Hover Effect using HTML, CSS & JavaScript.

This post is created to convey our Christmas wishes to the visitors. Let your life glitter like a Christmas star. Wish you all the "Merry Christmas".

The source code of this Glassmorphism Christmas Card with Hover Effect is given below, if you want the source code of this program, you can copy it. You can use this Glassmorphism Christmas Card with Hover Effect with your creativity and can take this project to the next level and also you can share this card to convey your wishes to your family and friends.

Glassmorphism Christmas Card with Hover Effect [Source Code]

To make this website (Glassmorphism Christmas Card with Hover Effect), you need to create three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

At first, the popup box will be displayed with a message and an 'OK' button. On clicking the 'OK' button, the card will be displayed. There is a Santa image on the card. On the hover of the card, a wish message will be displayed. The Glassmorphism effect has been used in this card.

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Glass Christmas Card || Learningrobo</title> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap'> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css'><link rel="stylesheet" href="style.css"> </head> <body> <div id="loader"></div> <div id="wrapper"> <div class="container"> <div class="shapes"></div> <div class="card" onclick=""> <img src="https://cdn.pixabay.com/photo/2016/03/31/23/49/christmas-1297870__480.png" /> <div class="text-container"> <h2>Merry Christmas</h2> <p> Joy to the world, the Lord is come, let earth receive her King.” – “Joy to the World </p> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </div> </div> <script src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and, remember that you have to create a file with a .css extension.


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
	-webkit-tap-highlight-color: transparent;
}

body {
	background-color: #ddd;
}
#wrapper {
	height: 450px;
	width: 350px;
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	display: none;
}

.container {
	height: 450px;
	width: 600px;
	top: 180px;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
}

a {

	background: #2f8bfc;
	color: #ffffff;
	display: block;
	width: 50%;
	bottom: 0;
	text-align: center;
	text-decoration: none;
	font-size: 10px;
	font-weight: 600;
	padding: 5px 0;
	border-radius: 5px;
}
.fab {
	color: #ff0000;
}
.shapes {
	height: 250px;
	width: 250px;
	background: linear-gradient(-45deg, #887fff, #594df8);
	border-radius: 50%;
	position: absolute;
	right: 0;
}

.shapes:before {
	content: "";
	position: absolute;
	height: 250px;
	width: 250px;
	top: 197px;
	right: 447px;
	background: linear-gradient(-45deg, #c9e265, #e4f3a7);
	border-radius: 50%;
}

.card {
	position: absolute;
	height: 500px;
	width: 650px;
	background-color: rgba(255, 255, 255, 0.15);
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
	cursor: pointer;
	overflow: hidden;
}

.text-container {
	position: absolute;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 14px;
	width: 450px;
	right: -450px;
	transition: 0.5s;
}

.card img {
	position: absolute;
	width: 400px;
	filter: drop-shadow(0 0 20px rgba(26, 0, 68, 0.34));
	bottom: 0;
	left: 120px;
	transition: 0.5s;
}

.card h2 {
	color: #1f0b50;
	text-transform: uppercase;
}

.card p {
	color: #261844;
	text-align: justify;
	line-height: 1.8;
	letter-spacing: 0.5px;
	font-weight: 300;
}

.card:hover img {
	width: 250px;
	left: 15px;
	bottom: 20px;
}

.card:hover .text-container {
	right: 15px;
}
@media screen and (max-width: 700px) {
	.container {
		transform: translate(-50%, -50%) scale(0.58);
	}
}
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.


window.addEventListener("load", function () {
	alert("Hover the card");
	document.getElementById("wrapper").style.display = "block";
});
We hope you would like this Glassmorphism Christmas Card with Hover Effect using HTML, CSS & JavaScript.

Thank you for reading our blog. If you face any problem creating this Glassmorphism Christmas Card with Hover Effect using HTML, CSS & JavaScript, then contact us or comment us. We will try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome