4.2K views
CSSAdd prefixes
1.card { 2 width: 195px; 3 height: 285px; 4 background: #313131; 5 border-radius: 20px; 6 ; 7 display: flex; 8 flex-direction: column; 9 align-items: center; 10 justify-content: center; 11 color: white; 12 transition: 0.2s ease-in-out; 13} 14 15.img { 16 height: 30%; 17 position: absolute; 18 transition: 0.2s ease-in-out; 19 z-index: 1; 20} 21 22.textBox { 23 opacity: 0; 24 display: flex; 25 flex-direction: column; 26 align-items: center; 27 justify-content: center; 28 gap: 15px; 29 transition: 0.2s ease-in-out; 30 z-index: 2; 31} 32 33.textBox > .text { 34 font-weight: bold; 35} 36 37.textBox > .head { 38 font-size: 20px; 39} 40 41.textBox > .price { 42 font-size: 17px; 43} 44 45.textBox > span { 46 font-size: 12px; 47 color: lightgrey; 48} 49 50.card:hover > .textBox { 51 opacity: 1; 52} 53 54.card:hover > .img { 55 height: 65%; 56 filter: blur(7px); 57 animation: anim 3s infinite; 58} 59 60@keyframes anim { 61 0% { 62 transform: translateY(0); 63 } 64 65 50% { 66 transform: translateY(-20px); 67 } 68 69 100% { 70 transform: translateY(0); 71 } 72} 73 74.card:hover { 75 transform: scale(1.04) rotate(-1deg); 76} 77 78
HTML
1<div class="card"> 2 <svg class="img" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 784.37 1277.39" xmlns:xlink="http://www.w3.org/1999/xlink"> 3 <g id="Layer_x0020_1"> 4 <metadata id="CorelCorpID_0Corel-Layer"></metadata> 5 <g id="_1421394342400"> 6 <g> 7 <polygon fill="#343434" fill-rule="nonzero" points="392.07,0 383.5,29.11 383.5,873.74 392.07,882.29 784.13,650.54"></polygon> 8 <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,0 -0,650.54 392.07,882.29 392.07,472.33"></polygon> 9 <polygon fill="#3C3C3B" fill-rule="nonzero" points="392.07,956.52 387.24,962.41 387.24,1263.28 392.07,1277.38 784.37,724.89"></polygon> 10 <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,1277.38 392.07,956.52 -0,724.89"></polygon> 11 <polygon fill="#141414" fill-rule="nonzero" points="392.07,882.29 784.13,650.54 392.07,472.33"></polygon> 12 <polygon fill="#393939" fill-rule="nonzero" points="0,650.54 392.07,882.29 392.07,472.33"></polygon> 13 </g> 14 </g> 15 </g> 16</svg> 17 <div class="textBox"> 18 <p class="text head">Ethereum</p> 19 <span>Cryptocurrency</span> 20 <p class="text price">1.654,34€</p> 21 </div> 22</div> 23