Learn to create a responsive card with a glowing hover effect using HTML and CSS in this step-by-step tutorial.
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. Let's break it down:
1. Basic Structure (<head> Section)
<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">
<link rel="stylesheet" href="styles.css">
<title>Responsive Card with a Glowing Hover Effect</title>
</head>- meta charset="UTF-8" → Ensures support for different characters.
- meta http-equiv="X-UA-Compatible" content="IE=edge" → Ensures compatibility with Internet Explorer.
- meta name="viewport" content="width=device-width, initial-scale=1.0" → Makes the design responsive for mobile screens.
<link rel="stylesheet" href="styles.css">→ Connects the external CSS file for styling.<title>→ Sets the page title.
2. Container for the Cards
<body>
<div class="container">- The .container div is the main wrapper that holds all the cards inside it.
3. Card Structure
- Each card consists of two parts:
- face1: Displays the title and image.
- face2: Contains descriptive text and a button.
Card 1 (Canyons)
<div class="card">
<div class="face face1">
<div class="outer">
<h1 class="title">Canyons</h1>
<img src="https://images.unsplash.com/photo-1479660656269-197ebb83b540?...">
</div>
</div>
<div class="face face2">
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
<a href="#" type="button">Read More</a>
</div>
</div>
</div>- .card → A single card container.
- .face face1 → Holds the title and image inside an .outer div.
- .face face2 → Contains description and a "Read More" button inside an .inner div.
4. Additional Cards
A similar structure is repeated for Beaches and Trees.
<div class="card">
<div class="face face1">
<div class="outer">
<h1 class="title">Beaches</h1>
<img src="https://images.unsplash.com/photo-1479659929431-4342107adfc1?...">
</div>
</div>
<div class="face face2">
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
<a href="#" type="button">Read More</a>
</div>
</div>
</div>- Different image and title for each card.
- The third card follows the same pattern but with the title "Trees".
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. Below is a detailed breakdown of each section:
1. Styling the body
body {
margin: 0;
padding: 0;
background-color: #BCAAA4;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Segoe UI;
}- margin: 0; padding: 0; → Removes default spacing.
- background-color: #BCAAA4; → Sets a light brown background color.
- min-height: 100vh; → Ensures the body takes the full viewport height.
- display: flex; justify-content: center; align-items: center; → Centers the content both horizontally and vertically.
- font-family: Segoe UI; → Sets a clean font for text.
2. Styling the .container
.container {
width: 1000px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}- width: 1000px; → Limits the maximum width.
- display: flex; → Uses Flexbox for layout.
- justify-content: space-between; → Spaces out the cards evenly.
- flex-wrap: wrap; → Ensures cards wrap when screen width is smaller.
3. Styling the .face (Both face1 and face2)
.face {
width: 300px;
height: 200px;
overflow: hidden;
transition: .4s;
}- width: 300px; height: 200px; → Sets the size of each face.
- overflow: hidden; → Hides any overflowing content.
- transition: .4s; → Adds a smooth transition effect.
4. Styling .face1 (Front Side)
.face1 {
position: relative;
background: #333;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
z-index: 1;
transform: translateY(100px);
}- position: relative; → Allows absolute positioning of child elements.
- background: #333; → Sets a dark background.
- display: flex; justify-content: center; align-items: center; → Centers content inside the card.
- z-index: 1; → Places .face1 above .face2.
- transform: translateY(100px); → Moves it down by 100px initially.
5. Styling .face2 (Back Side)
.face2 {
background: whitesmoke;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
transform: translateY(-100px);
}- background: whitesmoke; → Gives a light background.
- display: flex; justify-content: center; align-items: center; → Centers content.
- padding: 20px; → Adds spacing around text.
- box-sizing: border-box; → Ensures padding doesn't increase width.
- transform: translateY(-100px); → Moves it up initially.
6. Hover Effect for .face1 (Glowing Effect)
.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;
}- transform: translateY(0); → Moves .face1 to its normal position.
- box-shadow → Creates a glowing effect with multiple neon colors.
7. Styling .outer (Title and Image Wrapper)
.outer {
opacity: .3;
text-align: center;
transition: 0.5s;
}
.card:hover .outer {
opacity: 1;
}- opacity: .3; → Initially, the content is faded out.
- text-align: center; → Centers text inside the container.
- transition: 0.5s; → Adds smooth fade-in effect.
- On Hover (.card:hover .outer) → The opacity becomes 1, making the content fully visible.
8. Hover Effect for .face2
.card:hover .face.face2 {
transform: translateY(0);
}- transform: translateY(0); → Moves .face2 to its normal position, making it visible.
9. Styling the Image
img {
width: 300px;
height: 200px;
}- Ensures all images are of the same size.
10. Styling Paragraphs (<p>) and Links (<a>)
p, a {
font-size: 10pt;
margin: 0;
padding: 0;
color: #333;
}- Sets font size, removes margin/padding, and applies dark text color.
a {
text-decoration: none;
color: black;
box-sizing: border-box;
outline: 1px dashed #333;
padding: 10px;
margin: 15px 0 0;
display: inline-block;
}- Removes underline, adds dashed border, and makes it an inline-block.
a:hover {
background: #333;
color: #fff;
}- On hover, the background becomes dark and the text turns white.
11. Styling .title (Card Title)
.title {
position: absolute;
top: 135px;
color: #fff;
}- Positions the title inside .face1.
- Keeps text white for contrast.
This will give our glowing cards an upgraded presentation. Create a CSS file with the name 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 😊
