پیشنمایش زنده
کد HTML
<div class="card">
<div class="header">
<div class="img-box">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M20.083 15.2l1.202.721a.5.5 0 0 1 0 .858l-8.77 5.262a1 1 0 0 1-1.03 0l-8.77-5.262a.5.5 0 0 1 0-.858l1.202-.721L12 20.05l8.083-4.85zm0-4.7l1.202.721a.5.5 0 0 1 0 .858L12 17.65l-9.285-5.571a.5.5 0 0 1 0-.858l1.202-.721L12 15.35l8.083-4.85zm-7.569-9.191l8.771 5.262a.5.5 0 0 1 0 .858L12 13 2.715 7.429a.5.5 0 0 1 0-.858l8.77-5.262a1 1 0 0 1 1.03 0zM12 3.332L5.887 7 12 10.668 18.113 7 12 3.332z" fill="rgba(66,193,110,1)"></path>
</svg>
</div>
<span class="title">Features
</span></div>
<div class="content">
<p>
Lorem ipsum dolor sit tali amet, consectus uy
adipiscing it amet it...
</p>
<a class="btn-link">Read More...</a>
</div>
</div>
کد CSS
.card {
width: 190px;
height: 120px;
transition: all .5s;
box-shadow: 15px 15px 30px rgba(25, 25, 25, 0.11),
-15px -15px 30px rgba(60, 60, 60, 0.082);
text-align: center;
overflow: hidden;
}
.card:hover {
height: 260px;
background: linear-gradient(360deg, #edededc5 60%, hsla(0, 0%, 13%, 1) 70%);
}
.card .header {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #212121;
margin-bottom: 16px;
}
.card .header .img-box {
width: 50px;
}
.card .header .title {
font-size: 1em;
letter-spacing: .1em;
font-weight: 900;
text-transform: uppercase;
padding: 4px 0 14px 0;
transition: all .5s;
color: #edededc5;
}
.card:hover .header {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
}
.card:hover .card .header .title {
padding: 0;
}
.card .content {
display: block;
text-align: left;
color: #212121;
margin: 0 18px;
}
.card .content p {
transition: all .5s;
font-size: .8em;
margin-bottom: 8px;
}
.card .content a {
color: #1d8122;
cursor: pointer;
transition: all .5s;
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
}
.card .content .btn-link:hover {
border-bottom: 1px solid #1d8122;
}