Jan 16, 20231.2K views
CSSAdd prefixes
1.card { 2 width: 195px; 3 height: 285px; 4 background: #313131; 5 display: flex; 6 flex-direction: column; 7 align-items: center; 8 justify-content: center; 9 color: white; 10 transition: 0.2s ease-in-out; 11} 12 13.img { 14 height: 50%; 15 position: absolute; 16 transition: 0.2s ease-in-out; 17 z-index: 1; 18} 19 20.textBox { 21 opacity: 0; 22 display: flex; 23 flex-direction: column; 24 align-items: center; 25 justify-content: center; 26 gap: 15px; 27 transition: 0.2s ease-in-out; 28 z-index: 2; 29} 30 31.textBox > .text { 32 font-weight: bold; 33} 34 35.textBox > .head { 36 font-size: 20px; 37} 38 39.textBox > .price { 40 font-size: 17px; 41} 42 43.textBox > span { 44 font-size: 12px; 45 color: lightgrey; 46} 47 48.card:hover > .textBox { 49 opacity: 1; 50} 51 52.card:hover > .img { 53 height: 65%; 54 filter: blur(7px); 55 animation: anim 3s infinite; 56} 57 58@keyframes anim { 59 0% { 60 transform: translateY(0); 61 } 62 63 50% { 64 transform: translateY(-20px); 65 } 66 67 100% { 68 transform: translateY(0); 69 } 70} 71 72.card:hover { 73 transform: scale(1.04) rotate(-1deg); 74} 75 76
HTML
1<div class="card"> 2 <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"> 3 <g id="Layer_x0020_1"> 4 <metadata id="CorelCorpID_0Corel-Layer"></metadata> 5 <g id="_1421394342400"> 6 <g> 7 <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> 8 <polygon points="392.07,0 -0,650.54 392.07,882.29 392.07,472.33" fill-rule="nonzero" fill="#8C8C8C"></polygon> 9 <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> 10 <polygon points="392.07,1277.38 392.07,956.52 -0,724.89" fill-rule="nonzero" fill="#8C8C8C"></polygon> 11 <polygon points="392.07,882.29 784.13,650.54 392.07,472.33" fill-rule="nonzero" fill="#141414"></polygon> 12 <polygon points="0,650.54 392.07,882.29 392.07,472.33" fill-rule="nonzero" fill="#393939"></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