#e8e8e8
1.card { 2 position: relative; 3 top: 2em; 4 width: 12.5em; 5 height: 7.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: -4em; 93 left: 9.5em; 94 width: 70px; 95 height: 70px; 96 transition: .4s ease-in-out; 97} 98 99.card:hover { 100 width: 12.5em; 101 height: 23em; 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: -18em; 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}
Comments
MIT License