1.1K views
CSSAdd prefixes
1.card { 2 position: relative; 3 top: 2em; 4 width: 12.5em; 5 height: 6.5em; 6 background: white; 7 transition: .4s ease-in-out; 8 border-radius: 15px; 9 box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px; 10 overflow: hidden; 11} 12 13.heading { 14 position: relative; 15 color: black; 16 font-weight: bold; 17 font-size: 1.1em; 18 padding-top: 1em; 19 padding-left: 1em; 20 transition: .4s ease-in-out; 21} 22 23.details { 24 position: relative; 25 color: black; 26 font-size: 0.6em; 27 padding-top: 1.5em; 28 padding-left: 2em; 29 transition: .4s ease-in-out; 30} 31 32.price { 33 position: relative; 34 color: black; 35 font-weight: bold; 36 font-size: 0.8em; 37 padding-top: 1.5em; 38 padding-left: 1.5em; 39 top: 9.6em; 40 left: 5em; 41 transition: .4s ease-in-out; 42} 43 44.btn1 { 45 position: relative; 46 border: none; 47 outline: none; 48 background-color: black; 49 color: white; 50 font-size: 0.6em; 51 padding-left: 6.9em; 52 padding-right: 6.9em; 53 padding-top: 0.8em; 54 padding-bottom: 0.85em; 55 border-radius: 10px; 56 left: 2.6em; 57 top: 14.8em; 58 transition: .4s ease-in-out; 59 font-weight: bold; 60} 61 62.btn1:hover { 63 background-color: limegreen; 64 cursor: pointer; 65} 66 67.btn2 { 68 position: relative; 69 border: none; 70 outline: none; 71 background-color: black; 72 color: white; 73 font-size: 0.6em; 74 padding-left: 5.1em; 75 padding-right: 5.1em; 76 padding-top: 0.8em; 77 padding-bottom: 0.85em; 78 border-radius: 10px; 79 left: 2.6em; 80 top: 15.5em; 81 transition: .4s ease-in-out; 82 font-weight: bold; 83} 84 85.btn2:hover { 86 background-color: limegreen; 87 cursor: pointer; 88} 89 90.glasses { 91 position: relative; 92 top: -3.5em; 93 left: 10em; 94 width: 70px; 95 height: 70px; 96 transition: .4s ease-in-out; 97} 98 99.card:hover { 100 width: 12.5em; 101 height: 21.7em; 102 transform: translateY(1.25em); 103} 104 105.card:hover + .glasses { 106 transform: rotateX(360deg); 107 height: 100px; 108 width: 100px; 109 left: 3em; 110 top: -17.5em; 111} 112 113.card:hover .heading { 114 transform: translateY(7em) translateX(2.3em); 115} 116 117.card:hover .details { 118 transform: translateY(13em) translateX(3.5em); 119}
HTML
1<div class="card"> 2 <div class="heading">UltraFlex</div> 3 <div class="details">Beste Design till date.<br>Flex it up as you wish,<br> but you can't break it.</div> 4 <div class="price">$299</div> 5 <button class="btn1">Buy</button> 6 <button class="btn2">Add to Cart</button> 7</div> 8 9<svg xml:space="preserve" viewBox="0 0 100 100" height="100px" width="100px" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1" class="glasses"> <image href="data:image/png;base64,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 98wWsAAAAASUVORK5CYII=" y="0" x="0" height="100" width="100" id="image0"></image> 99</svg>