پیشنمایش زنده
کد HTML
<div class="card">
<svg
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 784.37 1277.39"
clip-rule="evenodd"
fill-rule="evenodd"
image-rendering="optimizeQuality"
text-rendering="geometricPrecision"
shape-rendering="geometricPrecision"
version="1.1"
height="100%"
width="100%"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
class="img"
>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"></metadata>
<g id="_1421394342400">
<g>
<polygon
points="392.07,0 383.5,29.11 383.5,873.74 392.07,882.29 784.13,650.54"
fill-rule="nonzero"
fill="#343434"
></polygon>
<polygon
points="392.07,0 -0,650.54 392.07,882.29 392.07,472.33"
fill-rule="nonzero"
fill="#8C8C8C"
></polygon>
<polygon
points="392.07,956.52 387.24,962.41 387.24,1263.28 392.07,1277.38 784.37,724.89"
fill-rule="nonzero"
fill="#3C3C3B"
></polygon>
<polygon
points="392.07,1277.38 392.07,956.52 -0,724.89"
fill-rule="nonzero"
fill="#8C8C8C"
></polygon>
<polygon
points="392.07,882.29 784.13,650.54 392.07,472.33"
fill-rule="nonzero"
fill="#141414"
></polygon>
<polygon
points="0,650.54 392.07,882.29 392.07,472.33"
fill-rule="nonzero"
fill="#393939"
></polygon>
</g>
</g>
</g>
</svg>
<div class="textBox">
<p class="head">Ethereum</p>
<p class="discription">Cryptocurrency</p>
<p class="price">1.654,34€</p>
</div>
</div>
کد CSS
.card {
width: 195px;
height: 285px;
background: #313131;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
transition: 0.2s ease-in-out;
position: relative;
cursor: pointer;
}
.img {
height: 60%;
position: absolute;
transition: 0.2s ease-in-out;
z-index: 1;
}
.textBox {
opacity: 0;
display: flex;
flex-direction: column;
align-items: start;
justify-content: end;
width: 100%;
height: 100%;
gap: 0em;
padding: 1em;
z-index: 5;
transition: 0.2s ease-in-out;
}
.textBox > .head {
font-size: 1em;
font-weight: bold;
}
.textBox > .price {
font-size: 1em;
font-weight: bold;
}
.textBox > .discription {
font-size: 0.8em;
color: lightgrey;
font-weight: light;
}
.card:hover > .textBox {
opacity: 1;
gap: 0.5em;
}
.card:hover > .img {
filter: blur(3px);
animation: anim 3s infinite ease-in-out;
}
@keyframes anim {
50% {
transform: translateY(-10%) rotate(5deg);
}
}
.card:hover {
transform: scale(1.04);
}