فهرست مطالب
نتیجه نهایی که بدست می آورید:
Pishi Khan
Website designer
pishijoon@
20k Follower
+
Follow
Hakopian
Graphic designer
dobersag@
25k Follower
+
Follow
mal mal
UI/UX designer
malmal@
10k Follower
+
Follow
html
<div class="custom-card">
<div class="hover-blur"></div>
<div class="hover-blur-mask"></div>
<!-- لایه بلور 17 درصد پایین -->
<div class="blur-layer"></div>
<div class="blur-mask"></div>
<div class="card-header">
<h2 id="toc-4">Pishi Khan</h2>
<span>Website designer</span>
</div>
<div class="bottom-info">
<div class="profile">
<img decoding="async" src="https://team.barangads.com/wp-content/uploads/2025/11/cat12.jpg">
<div class="profile-text">
<strong>pishijoon@</strong>
<span>20k Follower</span>
</div>
</div>
<div class="btn">
<span>+</span>
<span>Follow</span>
</div>
</div>
</div>
css
<style>
/* کارت */
.custom-card{
width:330px;
height:480px;
border-radius:28px;
overflow:hidden;
position:relative;
cursor:pointer;
color:white;
margin:auto;
}
/* پسزمینه */
.custom-card::before{
content:"";
position:absolute;
inset:0;
background:url('https://team.barangads.com/wp-content/uploads/2025/11/cat1.jpg') center/cover no-repeat;
z-index:-3;
transition:0.4s ease;
}
/* ------------------------
17% BLUR (پایین کارت)
-------------------------*/
/* بلور 30 درصد پایین */
.custom-card .blur-layer{
position:absolute;
bottom:0;
left:0;
width:100%;
height:17%;
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
z-index:-2;
}
/* گرادیان روی بلور پایین */
.custom-card .blur-mask{
position:absolute;
bottom:0;
left:0;
width:100%;
height:30%;
pointer-events:none;
z-index:-1;
background:linear-gradient(to top,
rgba(0,0,0,0.35),
rgba(0,0,0,0)
);
mix-blend-mode:overlay;
}
.custom-card .hover-blur{
position:absolute;
inset:0;
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
opacity:0;
transition:0.4s ease;
z-index:1;
pointer-events:none;
}
/* ماسک گرادیانی برای بلور کامل */
.custom-card .hover-blur-mask{
position:absolute;
inset:0;
background:linear-gradient(to top,
rgba(0,0,0,0.35),
rgba(0,0,0,0)
);
opacity:0;
transition:0.4s ease;
pointer-events:none;
z-index:2;
}
/* فعال کردن بلور کامل در حالت هاور */
.custom-card:hover .hover-blur,
.custom-card:hover .hover-blur-mask{
opacity:1;
}
/* ------------------------
HEADER
-------------------------*/
.custom-card .card-header{
position:absolute;
top:30px;
left:0;
width:100%;
text-align:center;
transition:0.4s ease;
z-index:4;
}
.custom-card .card-header h2{
margin:0;
font-size:28px;
}
.custom-card .card-header span{
font-size:14px;
opacity:0.9;
}
/* تیتر بیاد وسط در هاور */
.custom-card:hover .card-header{
top:50%;
transform:translateY(-50%);
}
/* ------------------------
پایین کارت (پروفایل + دکمه)
-------------------------*/
.custom-card .bottom-info{
position:absolute;
bottom:20px;
width:100%;
padding:0 20px;
display:flex;
justify-content:space-between;
align-items:center;
z-index:5;
}
.custom-card .profile{
display:flex;
align-items:center;
gap:10px;
}
.custom-card .profile img{
width:38px;
height:38px;
border-radius:50%;
object-fit:cover;
}
.custom-card .profile-text{
display:flex;
flex-direction:column;
font-size:14px;
}
/* ------------------------
BUTTON
-------------------------*/
.custom-card .btn{
background:white;
color:black;
padding:10px 18px;
border-radius:12px;
display:flex;
align-items:center;
gap:6px;
transition:0.3s ease;
z-index:5;
}
.custom-card .btn:hover{
background:black;
color:white;
}
</style>
