Learn to create a responsive card with a glowing hover effect using HTML and CSS in this step-by-step tutorial. Perfect for web developers and front-end designers.
Table of Contents
Creating visually appealing design elements is an important aspect of web development. One popular design trend is the use of responsive cards with glowing hover effects. These design elements can help highlight important information and add visual interest to your website. However, creating these effects may seem daunting for beginners. In this tutorial, we will provide step-by-step instructions on how to create a responsive card with a glowing hover effect using HTML and CSS. This tutorial is aimed at beginners who have a basic understanding of HTML and CSS and want to take their skills to the next level. By the end of this tutorial, you will have learned how to create a visually stunning design element that can be used on your website.
A responsive card with a glowing hover effect is a design element that consists of a card-like container that adjusts its size and layout based on the size of the screen or viewport, and has a glowing effect applied to it when hovered over with the mouse.
To create a responsive card with a glowing hover effect using HTML and CSS, you can use media queries to apply different styles based on the size of the viewport, and use the :hover pseudo-class to apply the glowing effect to the card.
Watch full tutorial on my YouTube Channel: Watch Here.
Let's start making an amazing responsive card with a glowing hover effect Using HTML and CSS step by step.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our glowing card.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our glow effect into cards. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our glowing cards an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body{
margin: 0;
padding: 0;
background-color: #BCAAA4;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Segoe UI;
}
.container{
width: 1000px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.face{
width: 300px;
height: 200px;
overflow: hidden;
transition: .4s;
}
.face1{
position: relative;
background: #333;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
z-index: 1;
transform: translateY(100px);
}
.face2{
background: whitesmoke;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
transform: translateY(-100px);
}
.card:hover .face.face1{
transform: translateY(0);
box-shadow: inset 0 0 60px whitesmoke,
inset 20px 0 80px #f0f,
inset -20px 0 80px #0ff,
inset 20px 0 300px #f0f,
inset -20px 0 300px #0ff,
0 0 50px #fff,
-10px 0 80px #f0f,
10px 0 80px #0ff;
}
.outer{
opacity: .3;
text-align: center;
transition: 0.5s;
}
.card:hover .outer{
opacity: 1;
}
.card:hover .face.face2{
transform: translateY(0);
}
img{
width: 300px;
height: 200px;
}
p, a{
font-size: 10pt;
margin: 0;
padding: 0;
color: #333;
}
a{
text-decoration: none;
color: black;
box-sizing: border-box;
outline: 1px dashed #333;
padding: 10px;
margin: 15px 0 0;
display: inline-block;
}
a:hover{
background: #333;
color: #fff;
}
.title{
position: absolute;
top: 135px;
color: #fff;
} Final Output:
Conclusion:
In conclusion, creating a responsive card with a glowing hover effect is a great way to add visual interest to your website. This tutorial has provided step-by-step instructions on how to achieve this effect using HTML and CSS. By following the instructions in this tutorial, beginners can improve their web development skills and create visually appealing design elements for their websites. It is important to note that this is just one example of how HTML and CSS can be used to create design elements, and there are many other possibilities to explore. With practice and experimentation, anyone can become proficient in web development and create beautiful websites. If you have any questions or need clarification on any of the steps, please feel free to ask.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
