Introduction of Card CSS Hover Effect
Here we are presenting you our new and amazing project. Which is a detail card with a hovering effect (card css hover effect), which makes it awesome. HTML and CSS assisted in creating this project. The project features a details card containing an image, a heading for the image, and several paragraphs describing it. When the user hovers over a Card. The background color of the image written will change. During hovering, a button will appear that will indicate that you should learn more about this article.
Now let’s start making this project with the help of the simple and easy code of HTML and CSS. Step by step, to understand it carefully. This project is very useful, as you can use it on your website. To store your product data or any other details. The difficulty level of the code will be intermediate, so everyone can understand it. Whether they are a beginner or a web developer. In spite of this, if you have to face any problems, feel free to ask from us. Here below in the footer, the contact details are given, which you can check.
HTML (Hyper Text Markup)
First, we will create the structure of this page with the help of HTML. First we will give the title of the project in the “title tag (this is used to give the title of the project). Then we will move toward the main content. In this, we will make a parent div that will contain all the cards. A child div that will handle the inner styling of the cards. There will be three child divs for the card. In which we will insert an image in the img tag (used to insert the image). A heading in the h3 tag (used to give the heading), an anchor tag (used to attach any external link). A paragraph in the p tag (used to write the paragraph). At the end, we will make a button for more information about the article.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
</head>
<body>
<section class="creative-cards style-one">
<div class="container">
<div class="row">
<div class="card-column">
<div class="card-details">
<div class="card-icons">
<img class="light-icon" src="./image/icons8-html-50.png" alt="icon" />
</div>
<h3><a href="#">HTML </a></h3>
<p>HyperText Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser.</p>
<a class="read-more-btn" href="#"><i class="fa-solid fa-angles-right"></i></a>
</div>
</div>
<div class="card-column">
<div class="card-details">
<div class="card-icons">
<img class="light-icon" src="./image/css-3_82127.png" alt="icon" />
</div>
<h3><a href="#">CSS </a></h3>
<p>CSS is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML.</p>
<a class="read-more-btn" href="#"><i class="fa-solid fa-angles-right"></i></a>
</div>
</div>
<div class="card-column">
<div class="card-details">
<div class="card-icons">
<img class="light-icon" src="./image/java-script_721671.png" alt="icon" />
</div>
<h3><a href="#">JavaScript</a></h3>
<p>JavaScript, often abbreviated as JS, is a programming language and core technology of the Web, alongside HTML and CSS. 99% of websites use JavaScript.</p>
<a class="read-more-btn" href="#"><i class="fa-solid fa-angles-right"></i></a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>CSS (Cascading Style Sheet)
After making the structure of this page with the help of HTML, we will now give it some styling. We will use CSS for styling. In this, we will first make the background orange using the background-color property. Take the whole parent div to the center of the screen. Now style the card, in which we will adjust the size of the parent div. Bend the angle of the image parent div and the card’s parent div with some degree to the right. We will give the color and font size to the heading and paragraph. Will hide the visibility of the button in default case.
@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&display=swap');
body {
font-size: 17px;
line-height: 30px;
font-weight: 400;
-moz-osx-font-smoothing: grayscale;
word-break: break-word;
-webkit-font-smoothing: antialiased;
font-family: "Epilogue", sans-serif;
margin: 0;
background: #fff;
/* background: #1f252e; */
}
* {
box-sizing: border-box;
}
.creative-cards {
padding: 120px 0;
position: relative;
}
.creative-cards .container {
max-width: 1320px;
width: 100%;
padding-right: .75rem;
padding-left: .75rem;
margin-right: auto;
margin-left: auto;
}
.creative-cards .container .row {
display: flex;
flex-wrap: wrap;
}
.creative-cards .container .row .card-column {
flex: 0 0 auto;
width: 33.33333333%;
text-align: center;
max-width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.card-details {
width: 80%;
margin: auto;
position: relative;
transition: .3s ease-in-out;
}
.card-details:before {
content: "";
width: 190px;
height: 380px;
background: #f7f6f2;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) skew(-20deg, 0deg);
z-index: -1;
transition: .3s ease-in-out;
}
.card-details:hover:before {
background-color: #fffab3;
}
.card-icons {
width: 140px;
height: 150px;
position: relative;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
.card-icons:before {
content: "";
position: absolute;
top: 0;
left: 0;
border: 1px solid;
width: 100%;
height: 100%;
transform: skew(-20deg, 0deg);
background: #fff;
border-color: #ffee02;
transition: .3s ease-in-out;
}
.card-details:hover .card-icons:before {
background-color: #ffee02;
}
.card-icons img {
position: relative;
width: 70px;
height: 70px;
}
.card-details h3 {
margin-bottom: 15px;
margin-top: 50px;
font-weight: 700;
font-size: 1.75rem;
line-height: 1.2;
}
.card-details h3 a {
color: #000;
text-decoration: none;
}
.card-details p {
font-size: 16px;
line-height: 30px;
color: #444;
/* color: #a3a0a0; */
font-weight: 400;
margin-bottom: 30px;
}
.read-more-btn {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
border-radius: 100%;
margin: auto;
background: #fff;
transform: translateX(-10px);
opacity: 0;
visibility: hidden;
border-color: #ffee02;
transition: .3s ease-in-out;
text-decoration: none;
}
.read-more-btn i {
color: #000;
font-size: 12px;
}
.card-details:hover .read-more-btn {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
/* ============= Responsive Ipad ==================== */
@media (max-width: 992px) {
.creative-cards .container .row .card-column {
flex: 0 0 auto;
width: 50%;
margin-bottom: 40px;
}
}
/* ============= Responsive Iphone ==================== */
@media (max-width: 480px) {
.creative-cards .container .row .card-column {
flex: 0 0 auto;
width: 100%;
margin-bottom: 20px;
}
.card-details {
width: 100%;
}
.read-more-btn {
transform: translateX(0px);
opacity: 1;
visibility: visible;
}
}When the user hovers over a particular card. The background color of the image background, card background, text, and heading color will chang. With some transition effect, and the button will be visible. At the end, we will make the page responsive to run on every size of device with the help of “@mediaquery (whic is used to make the web site responsive)”.
Output of Card CSS Hover Effect
Finally, we have made the detailed hovering card (card css hover effect) with the help of HTML and CSS code step by step. You can make such a project by taking ideas from here to enhance your knowledge and practice. This project is useful for you. If you want the source code, click on the button given below to download it.
For more explanation, click on the link given below to watch the video.
You can also check:
