Introduction
Today we are going to make a card hover effects html CSS by using the code of HTML and CSS. In this card, there will be some cards about profile, contact, and favorite (this is only for example; you can use it for another purpose) and their logos. When the user hovers on a particular card, some changes will occur. You can use it on your website to store your information or for other purposes.
Now let’s start making this project by following the simple code of HTML and CSS, which will be easy as everyone can understand it without any problem. If you have any problems, you can contact us through the contact information given.
HTML
First, we will create the structure of this card with the help of HTML. In this, we will make three parent divs in which all the content of the card will be written, and in each card there will be logos in the anchor tag according to the title of the card, their title in the heading tag, and some information about the card in the paragraph tag, and that text will be hidden through CSS.
<!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>Document</title>
</head>
<body>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- about -->
<div class="about">
<a class="bg_links social portfolio" href="# target="_blank">
<span class="icon"></span>
</a>
<a class="bg_links social dribbble" href="#" target="_blank">
<span class="icon"></span>
</a>
<a class="bg_links social linkedin" href="#" target="_blank">
<span class="icon"></span>
</a>
<a class="bg_links logo"></a>
</div>
<!-- end about -->
<div class="content">
<!-- card -->
<div class="card">
<div class="icon"><i class="material-icons md-36">face</i></div>
<p class="title">Profile</p>
<p class="text">Click to see or edit your profile page.</p>
</div>
<!-- end card -->
<!-- card -->
<div class="card">
<div class="icon"><i class="material-icons md-36">favorite_border</i></div>
<p class="title">Favourites</p>
<p class="text">Check all your favourites in one place.</p>
</div>
<!-- end card -->
<!-- card -->
<div class="card">
<div class="icon"><i class="material-icons md-36">alternate_email</i></div>
<p class="title">Contacts</p>
<p class="text">Add or change your contacts and links.</p>
</div>
<!-- end card -->
</div>
</div>
</body>
</html>CSS
After making the structure of the card, we will now give it styling as well as a hovering effect with the help of CSS( an external stylesheet used to give styling to the html page attached to the html file). In this, we will first make the background black and place all three cards in the center of the screen.
Now we will design the card, in which we will set the height, width, and border of the card, and then move toward the content of the card. In this, we will adjust the size and position of the logos and the titles of the card. We will apply a hovering effect, in which when the user hovers on the card, the color and background of the logo will change with some transitive effect, and we will also give a hovering effect to the text in the paragraph tag. In this case, we will make it hidden in the default case, and while hovering, text will appear, and at the end, when the user hovers on one particular card, the rest of the two cards will move down from the top with a little px.
body {
width: 100vw;
background-color: #1D1D1D;
margin: 0;
font-family: helvetica;
}
.about {
$cubic: cubic-bezier(0.64, 0.01, 0.07, 1.65);
$transition: 0.6s $cubic;
$size: 40px;
position: fixed;
z-index: 10;
bottom: 10px;
right: 10px;
width: $size;
height: $size;
display: flex;
justify-content: flex-end;
align-items: flex-end;
transition: all 0.2s ease;
.bg_links {
width: $size;
height: $size;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(#fff, 0.2);
border-radius: 100%;
backdrop-filter: blur(5px);
position: absolute;
}
.logo {
width: $size;
height: $size;
z-index: 9;
background-image: url(https://rafaelalucas91.github.io/assets/codepen/logo_white.svg);
background-size: 50%;
background-repeat: no-repeat;
background-position: 10px 7px;
opacity: 0.9;
transition: all 1s 0.2s ease;
bottom: 0;
right: 0;
}
.social {
opacity: 0;
right: 0;
bottom: 0;
.icon {
width: 100%;
height: 100%;
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
display: flex;
transition: all 0.2s ease, background-color 0.4s ease;
opacity: 0;
border-radius: 100%;
}
&.portfolio {
transition: all 0.8s ease;
.icon {
background-image: url(https://rafaelalucas91.github.io/assets/codepen/link.svg);
}
}
&.dribbble {
transition: all 0.3s ease;
.icon {
background-image: url(https://rafaelalucas91.github.io/assets/codepen/dribbble.svg);
}
}
&.linkedin {
transition: all 0.8s ease;
.icon {
background-image: url(https://rafaelalucas91.github.io/assets/codepen/linkedin.svg);
}
}
}
&:hover {
width: 105px;
height: 105px;
transition: all $transition;
.logo {
opacity: 1;
transition: all 0.6s ease;
}
.social {
opacity: 1;
.icon {
opacity: 0.9;
}
&:hover {
background-size: 28px;
.icon {
background-size: 65%;
opacity: 1;
}
}
&.portfolio {
right: 0;
bottom: calc(100% - 40px);
transition: all 0.3s 0s $cubic;
.icon {
&:hover {
background-color: #698fb7;
}
}
}
&.dribbble {
bottom: 45%;
right: 45%;
transition: all 0.3s 0.15s $cubic;
.icon {
&:hover {
background-color: #ea4c89;
}
}
}
&.linkedin {
bottom: 0;
right: calc(100% - 40px);
transition: all 0.3s 0.25s $cubic;
.icon {
&:hover {
background-color: #0077b5;
}
}
}
}
}
}
.wrapper {
width: 100vw;
margin: 0 auto;
height: 400px;
background-color: #161616;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transition: all 0.3s ease;
}
@media screen and (max-width: 767px) {
.wrapper {
height: 700px;
}
}
.content {
max-width: 1024px;
width: 100%;
padding: 0 4%;
padding-top: 250px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 767px) {
.content {
padding-top: 300px;
flex-direction: column;
}
}
.card {
width: 100%;
max-width: 300px;
min-width: 200px;
height: 250px;
background-color: #292929;
margin: 10px;
border-radius: 10px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24);
border: 2px solid rgba(7, 7, 7, 0.12);
font-size: 16px;
transition: all 0.3s ease;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
cursor: pointer;
transition: all 0.3s ease;
}
.icon {
margin: 0 auto;
width: 100%;
height: 80px;
max-width:80px;
background: linear-gradient(90deg, #FF7E7E 0%, #FF4848 40%, rgba(0, 0, 0, 0.28) 60%);
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
color: white;
transition: all 0.8s ease;
background-position: 0px;
background-size: 200px;
}
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.card .title {
width: 100%;
margin: 0;
text-align: center;
margin-top: 30px;
color: white;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 4px;
}
.card .text {
width: 80%;
margin: 0 auto;
font-size: 13px;
text-align: center;
margin-top: 20px;
color: white;
font-weight: 200;
letter-spacing: 2px;
opacity: 0;
max-height:0;
transition: all 0.3s ease;
}
.card:hover {
height: 270px;
}
.card:hover .info {
height: 90%;
}
.card:hover .text {
transition: all 0.3s ease;
opacity: 1;
max-height:40px;
}
.card:hover .icon {
background-position: -120px;
transition: all 0.3s ease;
}
.card:hover .icon i {
background: linear-gradient(90deg, #FF7E7E, #FF4848);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 1;
transition: all 0.3s ease;
}Finally, we made the card hover effects html CSS with the help of HTML and CSS by following their codes in easy steps. I hope you have understood it completely. If you want the source code, then click on the button given below.
For more explanation, click on the link given below.
You can also check About Card With Hover Effect
