Introduction
Here today, we are going to create a Hover skill card with a hovering effect with the help of HTML and CSS. In this card, a skilled person will be mentioned with their details, as you can see in the result. This is very useful to show your skill to the client so he or she can know you very well.
Now let’s start making this skill card together by using the simple code of HTML and CSS. If you want to understand this complexity, you just have to follow us step by step.
HTML
First, we will create the structure of the skill card with the help of HTML. In this first step, we will make the parent div, in which all the cards will be inserted. Then we will move toward the card, in which we will make a subdiv for the card. Then we will fill in the card details, like giving the course name in the heading tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Skill Card || layakcoder</title>
</head>
<body>
<div class="ag-format-container">
<div class="ag-courses_box">
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">
UI/Web&Graph design for teenagers 11-17 years old
</div>
<div class="ag-courses-item_date-box">
Start:
<span class="ag-courses-item_date">
04.11.2022
</span>
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">
UX/UI Web-Design + Mobile Design
</div>
<div class="ag-courses-item_date-box">
Start:
<span class="ag-courses-item_date">
04.11.2022
</span>
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">
Annual package "Product+UX/UI+Graph designer 2022"
</div>
<div class="ag-courses-item_date-box">
Start:
<span class="ag-courses-item_date">
04.11.2022
</span>
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">
Graphic Design
</div>
<div class="ag-courses-item_date-box">
Start:
<span class="ag-courses-item_date">
04.11.2022
</span>
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">
Motion Design
</div>
<div class="ag-courses-item_date-box">
Start:
<span class="ag-courses-item_date">
30.11.2022
</span>
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">
Front-end development + jQuery + CMS
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg">
</div>
<div class="ag-courses-item_title">
Digital Marketing
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">
Interior Design
</div>
<div class="ag-courses-item_date-box">
Start:
<span class="ag-courses-item_date">
31.10.2022
</span>
</div>
</a>
</div>
</div>
</div>
</body>
</html>CSS
After making the structure of this card, we will give it styling and make it hover over the card with the help of CSS (an external stylesheet attached to the HTML file). In this, we will first make the background black.
Now we will design the card, in which we will set the position and size of the box and text contained in this card. Then we will make it hover, in which background color covers some little part, and when the user hovers on the card, that background color will spread all over the card.
.ag-format-container {
width: 1142px;
margin: 0 auto;
}
body {
background-color: #000;
}
.ag-courses_box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 50px 0;
}
.ag-courses_item {
-ms-flex-preferred-size: calc(33.33333% - 30px);
flex-basis: calc(33.33333% - 30px);
margin: 0 15px 30px;
overflow: hidden;
border-radius: 28px;
}
.ag-courses-item_link {
display: block;
padding: 30px 20px;
background-color: #121212;
overflow: hidden;
position: relative;
}
.ag-courses-item_link:hover,
.ag-courses-item_link:hover .ag-courses-item_date {
text-decoration: none;
color: #FFF;
}
.ag-courses-item_link:hover .ag-courses-item_bg {
-webkit-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
}
.ag-courses-item_title {
min-height: 87px;
margin: 0 0 25px;
overflow: hidden;
font-weight: bold;
font-size: 30px;
color: #FFF;
z-index: 2;
position: relative;
}
.ag-courses-item_date-box {
font-size: 18px;
color: #FFF;
z-index: 2;
position: relative;
}
.ag-courses-item_date {
font-weight: bold;
color: #f9b234;
-webkit-transition: color .5s ease;
-o-transition: color .5s ease;
transition: color .5s ease
}
.ag-courses-item_bg {
height: 128px;
width: 128px;
background-color: #f9b234;
z-index: 1;
position: absolute;
top: -75px;
right: -75px;
border-radius: 50%;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.ag-courses_item:nth-child(2n) .ag-courses-item_bg {
background-color: #3ecd5e;
}
.ag-courses_item:nth-child(3n) .ag-courses-item_bg {
background-color: #e44002;
}
.ag-courses_item:nth-child(4n) .ag-courses-item_bg {
background-color: #952aff;
}
.ag-courses_item:nth-child(5n) .ag-courses-item_bg {
background-color: #cd3e94;
}
.ag-courses_item:nth-child(6n) .ag-courses-item_bg {
background-color: #4c49ea;
}
@media only screen and (max-width: 979px) {
.ag-courses_item {
-ms-flex-preferred-size: calc(50% - 30px);
flex-basis: calc(50% - 30px);
}
.ag-courses-item_title {
font-size: 24px;
}
}
@media only screen and (max-width: 767px) {
.ag-format-container {
width: 96%;
}
}
@media only screen and (max-width: 639px) {
.ag-courses_item {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.ag-courses-item_title {
min-height: 72px;
line-height: 1;
font-size: 24px;
}
.ag-courses-item_link {
padding: 22px 40px;
}
.ag-courses-item_date-box {
font-size: 16px;
}
}Finally, we made the Hover skill card with the hovering effect with the use of HTML and CSS by following their simple code step by step. If you want the source code, then click on the button given below to download the code.
For more explanation, click on the link given below to watch the video.
You can also check Detail Hovering Card
