پیشنمایش زنده
کد HTML
<div class="card">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="38px" width="38px" version="1.1" id="heart" viewBox="0 0 471.701 471.701" xml:space="preserve">
<linearGradient id="gradientColor">
<stop offset="5%" stop-color="#7eaaff"></stop>
<stop offset="95%" stop-color="#ff48fb"></stop>
</linearGradient>
<g>
<path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1 c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3 l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4 C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3 s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4 c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3 C444.801,187.101,434.001,213.101,414.401,232.701z"></path>
</g>
</svg>
</div>
<p class="title">Favourites</p>
<p class="text">Check all your favourites in one place.</p>
</div>
کد CSS
.card {
width: 100%;
max-width: 300px;
min-width: 200px;
height: 250px;
background-color: #292929;
margin: 10px;
border-radius: 10px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24);
border: 2px solid rgba(7, 7, 7, 0.12);
font-size: 16px;
transition: all 0.3s ease;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
cursor: pointer;
font-family: 'Poppins', sans-serif;
}
.icon {
margin: 0 auto;
width: 100%;
height: 80px;
max-width: 80px;
background: linear-gradient(90deg, #7eaaff 0%, #ff48fb 40%, rgba(0, 0, 0, 0.28) 60%);
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.8s ease;
background-position: 0px;
background-size: 200px;
}
.icon svg {
fill: white;
}
.card .title {
width: 100%;
margin: 0;
text-align: center;
margin-top: 30px;
color: white;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 4px;
}
.card .text {
width: 80%;
margin: 0 auto;
font-size: 13px;
text-align: center;
margin-top: 20px;
color: white;
font-weight: 200;
letter-spacing: 2px;
opacity: 0;
max-height: 0;
transition: all 0.3s ease;
}
.card:hover {
height: 270px;
}
.card:hover .text {
transition: all 0.3s ease;
opacity: 1;
max-height: 40px;
}
.card:hover .icon {
background-position: -120px;
transition: all 0.3s ease;
}
.card:hover .icon svg path {
fill: url('#gradientColor');
transition: all 0.3s ease;
}