Welcome to my new blog post. In this tutorial, I will show you a CSS slide-up caption that works on the hover effect. When the user’s mouse hovers over the card, the small box smoothly slides to the upper side, showing the author’s name and a short overview of the blog post. Recently, I have posted how to show scrollbar on hover in CSS.
The HTML code creates a series of individual cards within a main container, represented by an unordered list <ul> with the class cards. Each card is represented by a list item <li>. The container is set up to display these cards in a grid layout, allowing for a responsive and organized presentation.
In total, there are four <li> elements, each corresponding to a distinct card within the grid. This structure facilitates a clean and efficient way to showcase multiple items (cards) in a visually appealing manner.
Author
Mojtaba Seyedi
Source Code / Edit On
Language
HTML & CSS
Responsive
Yes
License
MIT
Understanding How to Create a Slide-up Caption with Hover Effect Using HTML & CSS?
Each card is structured as a hyperlink (<a> tag with class card), allowing it to be clickable. The hyperlink doesn’t lead anywhere (as indicated by href=""), but this can be changed to navigate to a different URL when clicked.
Within each card, there are two main parts: the image and the overlay content.
The image for the card is added using a <img> tag with the class card__image. This image serves as the background or main visual element of the card.
Also Read:
Overlay Content:
The overlay section is basically our caption area. The overlay content is contained within <div> the class card__overlay. This overlay is initially hidden and slides up to become visible when the card is hovered over.
The overlay itself contains several elements:
- A header section (
<div>with classcard__header), which includes user information and a timestamp. It has an SVG graphic for stylistic purposes and an image (<img>with classcard__thumb) representing the author of the post. - A description paragraph (
<p>with classcard__description), containing additional text or information about the blog post. This is typically a summary or brief description.
Use this HTML code structure in your project.
<ul class="cards">
<li>
<a href="" class="card">
<img src="https://i.imgur.com/oYiTqum.jpg" class="card__image" alt="" />
<div class="card__overlay">
<div class="card__header">
<svg class="card__arc" xmlns="http://www.w3.org/2000/svg"><path /></svg>
<img class="card__thumb" src="https://i.imgur.com/7D7I6dI.png" alt="" />
<div class="card__header-text">
<h3 class="card__title">Jessica Parker</h3>
<span class="card__status">1 hour ago</span>
</div>
</div>
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, blanditiis?</p>
</div>
</a>
</li>
<li>
<a href="" class="card">
<img src="https://i.imgur.com/2DhmtJ4.jpg" class="card__image" alt="" />
<div class="card__overlay">
<div class="card__header">
<svg class="card__arc" xmlns="http://www.w3.org/2000/svg"><path /></svg>
<img class="card__thumb" src="https://i.imgur.com/sjLMNDM.png" alt="" />
<div class="card__header-text">
<h3 class="card__title">kim Cattrall</h3>
<span class="card__status">3 hours ago</span>
</div>
</div>
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, blanditiis?</p>
</div>
</a>
</li>
<li>
<a href="" class="card">
<img src="https://i.imgur.com/oYiTqum.jpg" class="card__image" alt="" />
<div class="card__overlay">
<div class="card__header">
<svg class="card__arc" xmlns="http://www.w3.org/2000/svg"><path /></svg>
<img class="card__thumb" src="https://i.imgur.com/7D7I6dI.png" alt="" />
<div class="card__header-text">
<h3 class="card__title">Jessica Parker</h3>
<span class="card__tagline">Lorem ipsum dolor sit amet consectetur</span>
<span class="card__status">1 hour ago</span>
</div>
</div>
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, blanditiis?</p>
</div>
</a>
</li>
<li>
<a href="" class="card">
<img src="https://i.imgur.com/2DhmtJ4.jpg" class="card__image" alt="" />
<div class="card__overlay">
<div class="card__header">
<svg class="card__arc" xmlns="http://www.w3.org/2000/svg"><path /></svg>
<img class="card__thumb" src="https://i.imgur.com/sjLMNDM.png" alt="" />
<div class="card__header-text">
<h3 class="card__title">kim Cattrall</h3>
<span class="card__status">3 hours ago</span>
</div>
</div>
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, blanditiis?</p>
</div>
</a>
</li>
</ul>Styling and Hover Effect:
The CSS within the <style> tags in the <head> section is responsible for the layout and visual style of the cards. This includes the grid layout, rounded corners, and other stylistic details.
The hover effect is created using CSS transitions and transformations. When the user hovers over a card, the overlay content slides up from the bottom, revealing additional information.
This structure provides a visually appealing and interactive way to present information in a card format, with each card containing an image and additional details that are revealed on hover.
Follow this CSS structure.
:root {
--surface-color: #fff;
--curve: 40;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Noto Sans JP', sans-serif;
background-color: #fef8f8;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 4rem 5vw;
padding: 0;
list-style-type: none;
}
.card {
position: relative;
display: block;
height: 100%;
border-radius: calc(var(--curve) * 1px);
overflow: hidden;
text-decoration: none;
}
.card__image {
width: 100%;
height: auto;
}
.card__overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
border-radius: calc(var(--curve) * 1px);
background-color: var(--surface-color);
transform: translateY(100%);
transition: .2s ease-in-out;
}
.card:hover .card__overlay {
transform: translateY(0);
}
.card__header {
position: relative;
display: flex;
align-items: center;
gap: 2em;
padding: 2em;
border-radius: calc(var(--curve) * 1px) 0 0 0;
background-color: var(--surface-color);
transform: translateY(-100%);
transition: .2s ease-in-out;
}
.card__arc {
width: 80px;
height: 80px;
position: absolute;
bottom: 100%;
right: 0;
z-index: 1;
}
.card__arc path {
fill: var(--surface-color);
d: path("M 40 80 c 22 0 40 -22 40 -40 v 40 Z");
}
.card:hover .card__header {
transform: translateY(0);
}
.card__thumb {
flex-shrink: 0;
width: 50px;
height: 50px;
border-radius: 50%;
}
.card__title {
font-size: 1em;
margin: 0 0 .3em;
color: #6A515E;
}
.card__tagline {
display: block;
margin: 1em 0;
font-family: "MockFlowFont";
font-size: .8em;
color: #D7BDCA;
}
.card__status {
font-size: .8em;
color: #D7BDCA;
}
.card__description {
padding: 0 2em 2em;
margin: 0;
color: #D7BDCA;
font-family: "MockFlowFont";
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
} Now that you understand the card structure and hover effects, you’re ready to create your own captivating on-hover captions. Go ahead and give it a try!