In today’s web design landscape, micro-interactions and hover effects play a crucial role in creating engaging user experiences. Today, we’ll dive into creating a stunning document preview card with a unique stacked hover effect and an animated search button. This design combines subtle animations, layered elements, and smooth transitions to create a delightful user interaction.
See the Pen Untitled by vishnu prabhakar (@vasurajoria) on CodePen.
The Design Challenge
Our goal is to create a document preview card that transforms a simple PDF preview into an interactive element. When users hover over the card, they’ll see:
- A dynamic stacked paper effect with rotating layers
- A smoothly animated search button that slides up from below
- Clean, minimal document information display
Code
HTML CODE
<!-- Main container for the document card -->
<div class="document-card">
<!-- Container for the preview section -->
<div class="preview-container">
<!-- PDF preview with stacked card effect -->
<div class="pdf-preview">
<!-- Document thumbnail/preview image -->
<img src="https://i.ibb.co/KjCLxTh/Green-and-Yellow-Clean-Business-Proposal-Book-Cover.jpg"
alt="Green-and-Yellow-Clean-Business-Proposal-Book-Cover"
border="0">
</div>
</div>
<!-- Footer section with document details -->
<div class="footer">
<div class="filename">exampleDocName.pdf</div>
<div class="page-count">3 pgs.</div>
</div>
<!-- Search button that appears on hover -->
<a href="#" class="search-btn">
<img src="https://www.svgrepo.com/show/532555/search.svg" alt="">
</a>
</div>CSS CODE
/* Center the content in the viewport */
body {
margin: 0px;
min-height: 100vh;
display: grid;
place-content: center;
font-family: arial;
}
/* Main PDF preview container styles */
.pdf-preview {
width: 300px;
border: 2px solid rgba(0,0,0,0.1);
line-height: 0;
position: relative;
border-radius: 12px;
}
/* Preview image styles */
.pdf-preview img {
width: 100%;
border-radius: 10px;
}
/* Stacked card effect using pseudo-elements */
.pdf-preview:after, .pdf-preview:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #fff;
left: 0px;
border-radius: 10px;
border: 2px solid rgba(0,0,0,0.1);
z-index: -1;
transition: all 0.3s;
box-shadow: 0px 3px 10px rgba(0,0,0,0.1)
}
/* Bottom card rotation */
.pdf-preview:after {
transform: rotate(-2deg);
}
/* Bottom card hover effect */
.pdf-preview:hover:after {
transform: rotate(-3deg);
}
/* Top card rotation */
.pdf-preview:before {
transform: rotate(4deg);
}
/* Top card hover effect */
.pdf-preview:hover:before {
transform: rotate(8deg);
}
/* Preview container layout */
.preview-container {
display: grid;
gap: 10px;
}
/* Footer section layout */
.footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 5px;
width: 100%;
}
/* Page count badge styles */
.page-count {
background: #36f;
color: #fff;
padding: 5px;
border-radius: 5px;
font-size: 12px;
}
/* Search button styles */
.search-btn {
background: linear-gradient(to right, blue, #36f);
position: absolute;
display: grid;
place-content: center;
padding: 20px;
border-radius: 50%;
transform: translateY(100px); /* Initially hidden below */
opacity: 0;
transition: all 0.3s;
}
/* Search button icon styles */
.search-btn img {
width: 20px;
filter: invert(); /* Makes the icon white */
}
/* Main card container layout */
.document-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Search button hover animation */
.document-card:hover .search-btn {
transform: translateY(0px); /* Slides up on hover */
opacity: 1;
}
/* Card stack hover animations */
.document-card:hover .pdf-preview:after {
transform: rotate(-3deg);
}
.document-card:hover .pdf-preview:before {
transform: rotate(8deg);
}Best Practices Used
- Smooth Transitions: All animations are set to 0.3 seconds, providing a consistent and pleasant experience.
- Progressive Enhancement: The card is fully functional without hover effects, making it accessible on touch devices.
- Visual Hierarchy: The stacked effect draws attention while maintaining readability of the document preview.
- Consistent Spacing: Careful padding and margin values create balanced proportions.
Browser Compatibility
This implementation uses modern CSS properties that are well-supported across all major browsers:
- CSS Transforms
- Flexbox
- CSS Transitions
- Pseudo-elements
Potential Customizations
You can easily adapt this design for various use cases:
- Modify colors and gradients to match your brand
- Adjust rotation angles for more subtle or dramatic effects
- Change the search button to any other action button
- Add additional hover effects like scale transformations
Conclusion
This document preview card demonstrates how thoughtful hover effects and animations can transform a simple UI element into an engaging interactive component. By combining multiple CSS techniques, we’ve created a design that’s both visually appealing and functional.
Remember, the key to successful hover effects is subtlety – they should enhance the user experience without overwhelming it. This implementation strikes that balance perfectly, providing feedback and delight while maintaining usability.
Try It Yourself
Feel free to use this code as a starting point for your own projects. Experiment with different angles, transitions, and colors to create your unique variation of this effect. Happy coding! Learn Coding in sikar at CSLAB Sikar
