Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Responsive Card with hover effect using HTML and CSS
While creating the responsive design for the application, it is also necessary to create a responsive card designs. Sometimes, developers require to add a hover effect on the card. So, when the user hovers over the card, it should change the style of the card.
Here, we will learn to add a hover effect on the card and change the CSS whenever the user hovers over the card.
Syntax
Users can follow the syntax below to add the hover effect to the card.
.card:hover {
/* add css to set to element on hover */
}
In the above syntax, card is a class name of the div element, and using the :hover, we can add a hover effect to the card div element.
Example
In the example below, we have created the div element with the ‘card’ class name. Also, we have added one image and description to the card.
We have used CSS to style the card. We have set the 10% width for the card and the minimum width for the card. Furthermore, we have added the hover effect on the card. We add an outline to the card and change the background color whenever users hover over the card.
<html>
<head>
<style>
.card {
width: 10%;
height: auto;
background-color: grey;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
margin: 20px;
border-radius: 12px;
min-width: 150px;
}
.card:hover {
/* add outline on the card */
outline: 5px solid red;
/* change background color on hover */
background-color: aqua;
}
img {
width: 95%;
height: 50%;
padding: 10px;
margin-top: 5px;
border-radius: 12px;
}
p {
font-size: 1.2rem;
justify-content: space-around;
margin-top: -5px;
padding: 1px;
}
</style>
</head>
<body>
<h2>Creating the <i> responsive card with hover effect </i> using HTML and CSS</h2>
<p>Please hover the cursor over the below card to see the effect</p>
<div class = "card">
<img src ="https://media.licdn.com/dms/image/C4E0BAQH5VgzmVzs-1Q/company-logo_200_200/0/1519883935014?e=2147483647&v=beta&t=dySBu3kqK_BgGOwVbEyNrB7qXAZxOk3befdkJ2INgzQ" alt = "logo">
<div class = "content">
<p> TutorialsPoint is one of the best platforms to learn about all leading programming languages and technologies. </p>
</div>
</div>
</body>
</html>
Example
In the example below, we created the card like the first example. Also, we have set the 15% width for the card. So, it is responsive.
In the output, users can observe that initially description of the image in the card is hidden, but whenever users hover over the card, it shows the description. Here, we change the display of the card-content div element whenever users hover over the card element.
Also, we have added the transition to the card div.
<html>
<head>
<style>
.card {
width: 15%;
height: auto;
background-color: green;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
margin: 20px;
border-radius: 12px;
min-width: 150px;
padding: 10px;
transition: 0.8s ease-in-out;
}
.card:hover {
/* add outline on the card */
outline: 5px solid red;
/* change background color on hover */
background-color: yellow;
}
img {
width: 100%;
height: 50%;
border-radius: 12px;
}
.card-content {
font-size: 1.2rem;
justify-content: space-around;
margin-top: 5px;
display: none;
transition: 1.3s ease-in-out;
}
.card:hover .card-content {
display: block;
transition-delay: 1.3s;
}
</style>
</head>
<body>
<h2>Creating the <i> responsive card with hover effect </i> using HTML and CSS.</h2>
<div class = "card">
<div class = "image">
<img src = "https://www.codecademy.com/resources/blog/wp-content/uploads/2022/12/should-i-learn-javascript-1.png" alt = "JS image">
</div>
<div class = "card-content">
JavaScript is a programming language used primarily for web development that allows for dynamic and interactive web pages. It is a client-side scripting language that can be executed directly in a user's browser without the need for additional software installations. JavaScript is used for a wide range of applications, including web development, mobile app development, and game development.
</div>
</div>
</body>
</html>
Users learned to create a responsive card and add a hover effect to the card. In the first example, we have added the simple hover effect, which changes the card's background colour on hover.
In the second example, we show the description of the card when users hover over the card.
854 Views
