Hello Readers, Today in this article we will show you how to create Card Hover Effects using HTML and CSS. This type of CSS Hover Effects is used on the websites for Testimonial systems and etc. Basically, a web developer uses jQuery or different types of plugins to create these.
You easily create Card Hover Effects HTML and CSS only without any jQuery or plugin then this article will definitely help you. For this, you need to have an idea about basic HTML and CSS then you can understand the following codes. It is designed in a completely modern way.
Some information about this CSS Card Hover Effects
I used three cards with text, buttons,s, and numbers. normal time shows only card numbers and hides content. When hovering the card background color change and content shows.
Watch the video tutorial to create Card Hover Effects
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this CSS Card Hover Effects step by step completely beautifully. So you can learn how to make these CSS Hover Effects. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this video Card Hover Effects Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- How To Create Accordion Menu using HTML & CSS
- Vertical Image Slider Using HTML, CSS and javaScript
- Responsive Login Form Create using HTML & CSS
Card Hover Effects | Source Codes
You have to create HTML & CSS File For this menu. After creating these files just paste the following codes into your file.
The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this Slider won’t appear. You’ve to download files from the given download button to use images also.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Card Hover Effects</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="face face1">
<div class="content">
<h2>Service One</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam veritatis commodi beatae deleniti praesentium</p>
<a href="#">Read More</a>
</div>
</div>
<div class="face face2">
<h2>01</h2>
</div>
</div>
<div class="card">
<div class="face face1">
<div class="content">
<h2>Service Two</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam veritatis commodi beatae deleniti praesentium</p>
<a href="#">Read More</a>
</div>
</div>
<div class="face face2">
<h2>02</h2>
</div>
</div>
<div class="card">
<div class="face face1">
<div class="content">
<h2>Service Three</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam veritatis commodi beatae deleniti praesentium</p>
<a href="#">Read More</a>
</div>
</div>
<div class="face face2">
<h2>03</h2>
</div>
</div>
</div>
</body>
</html>Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600;700;800&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #1a1a1d;
}
.container{
width: 1100px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap:15px;
margin: 0 auto;
}
.container .card{
position: relative;
width: 300px;
height: 400px;
margin: 0 auto;
background: #fff;
transition: 0.5s;
}
.container .card:hover{
box-shadow: 0 30px 50px rgba(0, 0, 0, 0.2);
}
.container .card .face{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container .card .face.face1{
box-sizing: border-box;
padding: 20px;
text-align: center;
background: #fff;
color: #c3073f;
}
.container .card .face.face1 h2{
margin-top: 60px;
}
.container .card .face.face1 a{
display: inline-block;
padding: 5px 10px;
margin-top: 20px;
text-decoration: none;
color: #c3073f;
border: 2px solid #c3073f;
transition: 0.5s;
}
.container .card .face.face1 a:hover{
color: #fff;
background: #c3073f;
}
.container .card .face.face2{
background: #c3073f;
transition: 0.5s;
}
.container .card:hover .face.face2{
height: 80px;
width: 80px;
border-radius: 50%;
top: 40px;
left: 50%;
transform: translateX(-50%);
background: transparent;
border: 2px solid #c3073f;
}
.container .card .face.face2 h2{
margin: 0px;
padding: 0;
font-size: 10em;
color: #fff;
transition: 0.5s;
}
.container .card:hover .face.face2 h2{
color: #c3073f;
font-size: 2em;
}now you’ve successfully created this Card Hover Effects Tutorial using HTML and CSS. If your code does not work or facing any error/problem to comment down or contact us through the contact page.
