When it comes to modern website design, interactive image galleries are one of the best ways to grab user attention. Instead of using static cards, you can implement a expandable hover card gallery where each card expands on hover to reveal additional information such as title and description. This not only looks attractive but also enhances user engagement on blogs, portfolios and showcase websites.
HTML Structure
The foundation of this expandable hover card gallery is a container that holds multiple cards inside a wrapper. Each card contains two elements — an image and a text wrapper. The image forms the background visual, while the text wrapper holds the heading and description.
<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 main container ensures the gallery is centered on the page.
- The card wrapper arranges all cards in a row with equal spacing.
- Each card is flexible and resizes when hovered.
- The text wrapper stays hidden initially and slides up when the user hovers on a card.
This creates a minimal yet powerful structure for interactive image presentation.
CSS Styling & Hover Animation
The magic of this component lies in the flexbox layout and hover effects.
.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;
left: 0;
right: 0;
overflow: hidden;
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;
}- The
.card-wrapperusesflexto align all cards horizontally. - Each card has a default equal width, but when hovered, it expands using
flex: 5, smoothly pushing other cards aside. - The card image is styled with
object-fit: coverto make sure it always fills the container without distortion. - The
.text-wrapperis initially hidden by translating it downward. On hover, it slides up into view with a gradient background for readability. - Headings and descriptions inside the text area are styled for clarity, while hover states on links add interactivity.
This ensures a fluid transition effect where text gracefully reveals itself as the card expands.
Real-World Use Cases
This expandable hover card gallery is perfect for:
- Portfolio websites to showcase projects with titles and short descriptions.
- Photography and art websites to display collections with hover-based details.
- Blog previews where each card represents an article.
- Product galleries for e-commerce, giving a sneak peek of product details.
The combination of interactivity and simplicity makes this design stand out in modern UI/UX practices.
An interactive expandable hover card gallery built with just HTML and CSS can make your website look professional and dynamic. By combining flexbox expansion and smooth transitions, you create a unique browsing experience that encourages visitors to engage more with your content.
This design requires no external JavaScript — only clean HTML and CSS — making it lightweight and easy to integrate into any type of website.
