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.
* {
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);
}
}
window.addEventListener("load", function () {
alert("Hover the card");
document.getElementById("wrapper").style.display = "block";
});
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.
Post a Comment
Thank you
Learning robo team