پیشنمایش زنده
کد HTML
<div class="card">
<div class="top-card">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"
></path>
</svg>
</div>
<div class="bottom-card">
<p class="bottom-card-title">Card Title</p>
<p class="bottom-card-content">Content</p>
</div>
</div>
کد CSS
.card {
--color-primary: #11140e;
--color-border: #8a8b90;
width: 200px;
height: 200px;
position: relative;
color: white;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.card:hover {
transition: 0.8s ease-in-out;
}
.top-card {
width: 200px;
height: 200px;
background-color: var(--color-primary);
border: 1px solid var(--color-border);
border-radius: 8px;
position: absolute;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
.top-card svg {
width: 50px;
height: 50px;
fill: var(--color-border);
}
.bottom-card {
width: 200px;
height: 120px;
background-color: var(--color-primary);
border: 1px solid var(--color-border);
border-radius: 8px;
position: relative;
transition:
margin-left 0.4s ease-in-out,
margin-top 0.3s ease-in-out 0.4s;
padding: 4%;
padding-top: 45px;
}
.card:hover .bottom-card {
margin-top: 160px;
margin-left: 20px;
transition:
margin-top 0.4s ease-in-out,
margin-left 0.3s ease-in-out 0.4s;
}
.bottom-card-title {
font-size: 20px;
font-weight: bold;
}
.bottom-card-content {
font-size: 14px;
}