Clip Path Circle Hover Up
#cards-006-clip-path-circle-hover-up
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<style type="text/tailwindcss">
.card {
@apply max-w-80 w-full relative rounded-2xl overflow-hidden shadow cursor-pointer;
}
.img {
@apply aspect-square;
}
.hover-content {
@apply p-5 absolute -bottom-20 group-hover:bottom-0 left-0 bg-white w-full rounded-tl-3xl transition-all duration-300;
}
.card:hover .hover-content {
@apply bottom-0;
}
.bg-clip {
@apply absolute bottom-full right-0 bg-white w-16 h-16 [clip-path:path('M0_65_C40_65_65_40_65_0_L65_65')];
}
.top-content {
@apply space-y-1 pb-5;
}
.title {
@apply text-3xl text-pink-500 font-bold;
}
.time {
@apply text-black/30 text-xs;
}
.description {
@apply line-clamp-3 text-sm text-black/30;
}
</style>
<body class="min-h-svh flex items-center justify-center">
<div class=" group card">
<img src="https://images.unsplash.com/photo-1758407909328-6b46fbfc5f98?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
class="img" alt="">
<div class="hover-content">
<div class="bg-clip"></div>
<div class="top-content">
<p class="title">NEW DESIGN</p>
<p class="time">2 hours ago</p>
</div>
<p class="description">
This is sample placeholder text used
for layout design.It
helps visualize how
real content will look inside the design.No meaning is attached, only structure and flow are shown
here.</p>
</div>
</div>
</body>
</html>