Create Interactive Card Hover Animation using HTML and CSS
Creating a visually appealing and Interactive Card Hover Animation can greatly enhance user experience on your website. In this tutorial, we will walk you through the process of building a card hover animation using HTML and CSS. The goal is to create cards that expand on hover, revealing more content in a smooth and animated manner.
Also Read: Bottom Navigation Menu using HTML CSS and JS
HTML Structure
The foundation of our card hover animation starts with a clean and well-organized HTML structure. The main components are a container for the cards, individual card and the content within each card.
<div class="main-container">
<div class="card-wrapper">
<div class="card">
<img src="https://images.unsplash.com/photo-1535957998253-26ae1ef29506?q=80&w=1936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="image">
<div class="text-wrapper">
<a href="#">
<h3 class="title">Lorem fre sds ipsum dolor sit.</h3>
</a>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga sint nam perferendis.</span>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1542546068979-b6affb46ea8f?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="image">
<div class="text-wrapper">
<a href="#">
<h3 class="title">Lorem fre sds ipsum dolor sit.</h3>
</a>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga sint nam perferendis.</span>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1619446345488-50c7e73509d3?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="image">
<div class="text-wrapper">
<a href="#">
<h3 class="title">Lorem fre sds ipsum dolor sit.</h3>
</a>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga sint nam perferendis.</span>
</div>
</div>
<div class="card"><img
src="https://images.unsplash.com/photo-1619080371491-144258310aa5?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="image">
<div class="text-wrapper">
<a href="#">
<h3 class="title">Lorem fre sds ipsum dolor sit.</h3>
</a>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga sint nam perferendis.</span>
</div>
</div>
<div class="card"><img
src="https://images.unsplash.com/photo-1619250556999-38af9033f9d4?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="image">
<div class="text-wrapper">
<a href="#">
<h3 class="title">Lorem fre sds ipsum dolor sit.</h3>
</a>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga sint nam perferendis.</span>
</div>
</div>
</div>
</div>
- The Card Wrapper: First, we define a wrapper div (.card-wrapper) that acts as a flex container for the individual cards. This container ensures that the cards are displayed side by side and align properly.
- Individual Cards: Each card (.card) within the wrapper is structured to hold an image and a text wrapper. The image provides the visual appeal, while the text wrapper contains the title and description that will be revealed on hover.
- Card Container: Each card is a flex item within the card wrapper. The card container is styled to be relatively positioned, allowing for the text wrapper to be absolutely positioned within it.
- Image: Inside each card, an image element is included to provide a visual focus. The image is set to cover the entire area of the card, making sure it adapts to the card's size.
- Text Wrapper: The text wrapper (.text-wrapper) is an absolutely positioned div that contains a title (<h3>) and a description (<span>). This wrapper is initially hidden and will be revealed with a sliding animation on hover.
CSS Styling
The CSS plays a crucial role in creating the visual and interactive aspects of our card hover animation. The styles define the layout, appearance, and hover effects for the cards.
.main-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
min-height: 420px;
}
.card-wrapper {
display: flex;
gap: 10px;
width: 400px;
height: 300px;
font-family: 'Calibri';
}
.card {
flex: 1;
overflow: hidden;
position: relative;
border-radius: 8px;
transition: flex .3s;
border: 1px solid #ffffff63;
}
.card:hover {
flex: 5;
}
.card:hover .text-wrapper {
transform: translateY(0);
}
.card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.text-wrapper {
position: absolute;
bottom: 0;
color: white;
padding: 15px;
text-align: justify;
transform: translateY(100%);
transition: transform .4s ease-in-out;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.538) 20%, black 70%);
}
.text-wrapper a {
text-decoration: none;
color: white;
}
.text-wrapper a:hover {
text-decoration: underline;
}
.text-wrapper h3 {
margin-bottom: 10px;
}
.text-wrapper span {
color: rgb(212, 212, 212);
font-size: 12px;
}- Card Wrapper Styling: The card wrapper is styled as a flex container to align and distribute the cards evenly. This ensures that the cards are displayed in a row with consistent spacing.
- Individual Card Styling: Each card is styled with a fixed width and height, rounded corners, and a border. The overflow is hidden to ensure that any content exceeding the card's boundaries is not visible. A transition property is applied to the flex property, allowing for a smooth expansion effect on hover.
- Hover Effect: When a card is hovered over, its flex property changes, causing it to expand. This effect is achieved using the transition property on the flex attribute.
- Image Styling: The image within each card is set to cover the entire area of the card, ensuring it scales properly and maintains its aspect ratio.
- Text Wrapper Styling: The text wrapper is absolutely positioned at the bottom of the card. Initially, it is translated downwards (out of view). On hover, it slides up to reveal the title and description. The transition property on the transform attribute creates a smooth sliding animation.
- Text and Link Styling: Within the text wrapper, the title and description are styled for readability and visual appeal. The title is displayed as a heading, while the description is shown as a smaller paragraph. Links within the text are styled to be white, and they change to underline on hover for better user interaction.
Adding Interactivity with CSS
The interactivity of the cards is achieved solely through CSS. By leveraging the hover pseudo-class and transition properties, we create a dynamic user experience without the need for JavaScript.
Card Hover Effect: When the user hovers over a card, several visual changes occur:
- Card Expansion: The flex property of the hovered card changes, making it expand and take up more space. This draws attention to the hovered card and makes it stand out.
- Text Reveal: Simultaneously, the text wrapper inside the card is animated to slide up from the bottom. This is done by transitioning the transform property, which changes from a translated position (hidden) to its original position (visible).
By combining these effects, we create a seamless and engaging hover animation that enhances the user experience.
In this tutorial, we have explored how to create a card hover animation using HTML and CSS. We started with a simple and clean HTML structure, then styled the cards and their contents using CSS. Finally, we added interactivity with CSS transitions to create a smooth and engaging hover effect.
Also Read: Ultimate Weather Web App using HTML CSS JavaScript | Fully Responsive
This technique can be a great addition to any website, providing a modern and interactive user experience. Whether you're showcasing products, portfolio items, or any other content, these card hover animations can help make your site more engaging and visually appealing. Experiment with different images, text, and styles to make this effect your own and enhance your web design with dynamic card animations.
