#212121
1.one-div { 2 background: rgba(77, 77, 77, 0.39); 3 width: 250px; 4 height: 300px; 5 border-radius: 1rem; 6 position: relative; 7 font-family: Montserrat; 8 font-size: large; 9 -webkit-perspective: 600px; 10 perspective: 600px; 11 display: -webkit-box; 12 display: -ms-flexbox; 13 display: flex; 14 justify-items: center; 15 -webkit-box-align: center; 16 -ms-flex-align: center; 17 align-items: center; 18 -webkit-transform: rotateX(-15deg) 19 rotateY(-35deg); 20 transform: rotateX(-15deg) 21 rotateY(-35deg); 22 -webkit-box-shadow: rgba(0, 0, 0, 0.103) 4px -4px 18px, 0rem 5rem 25px 10px rgba(0, 0, 0, 0.11); 23 box-shadow: rgba(0, 0, 0, 0.103) 4px -4px 18px, 0rem 5rem 25px 10px rgba(0, 0, 0, 0.11); 24 border: dashed 2px rgba(71, 71, 71, 0.425); 25 -webkit-transition: 0.6s ease-in-out; 26 transition: 0.6s ease-in-out; 27 -webkit-user-select: none; 28 -ms-user-select: none; 29 user-select: none; 30} 31 32.one-div:hover { 33 cursor: -webkit-zoom-in; 34 cursor: zoom-in; 35 -webkit-transform: translateY(-15px) 36 translateX(15px) 37 rotateX(-15deg) 38 rotateY(-35deg); 39 transform: translateY(-15px) 40 translateX(15px) 41 rotateX(-15deg) 42 rotateY(-35deg); 43 background: repeating-linear-gradient( 44 45deg, 45 #608bbc10, 46 #6097bc10 5px, 47 #466c9810 5px, 48 #46679810 15px 49); 50 border: dashed 2px rgba(0, 140, 255, 0.13); 51 -webkit-box-shadow: rgba(0, 0, 0, 0.103) 4px -4px 18px, -1rem 5rem 25px 20px rgba(0, 0, 0, 0.089); 52 box-shadow: rgba(0, 0, 0, 0.103) 4px -4px 18px, -1rem 5rem 25px 20px rgba(0, 0, 0, 0.089); 53} 54 55.one-div::before { 56 pointer-events: none; 57 /* no. */ 58 content: '\A ⠑⠭⠏⠇⠕⠗⠑\A E X P L O R E \A \A \A\A 🔎︎ hover'; 59 white-space: pre-wrap; 60 padding: 20px; 61 background: rgba(58, 58, 58, 0.39); 62 width: 210px; 63 height: 260px; 64 display: -webkit-box; 65 display: -ms-flexbox; 66 display: flex; 67 justify-items: center; 68 font-weight: 100; 69 border-radius: 1rem; 70 position: absolute; 71 text-align: center; 72 color: #fff; 73 text-shadow: rgba(255, 255, 255, 0.288) 0 0 2rem; 74 z-index: 10; 75 bottom: 0; 76 left: 0; 77 right: 0; 78 -webkit-transition: 0.4s cubic-bezier(0.87, 0, 0.13, 1); 79 transition: 0.4s cubic-bezier(0.87, 0, 0.13, 1); 80 -webkit-transition-delay: 0.05s; 81 transition-delay: 0.05s; 82 -webkit-transform: translateY(10px) translateX(-10px); 83 -ms-transform: translateY(10px) translateX(-10px); 84 transform: translateY(10px) translateX(-10px); 85 -webkit-box-shadow: rgba(0, 0, 0, 0.103) 4px -4px 12px; 86 box-shadow: rgba(0, 0, 0, 0.103) 4px -4px 12px; 87 border: solid 1px rgba(71, 71, 71, 0.425); 88} 89 90.one-div::after { 91 pointer-events: none; 92 /* One day I'll face consequences for my actions */ 93 content: ' \A\A parent\A\A ::before \A\A ::after '; 94 white-space: pre-wrap; 95 font-family: monospace; 96 text-align: end; 97 line-height: 1px; 98 word-spacing: -2rem; 99 100 background: rgba(68, 68, 68, 0.39); 101 width: 250px; 102 height: 300px; 103 display: -webkit-box; 104 display: -ms-flexbox; 105 display: flex; 106 justify-items: center; 107 -webkit-box-align: start; 108 -ms-flex-align: start; 109 align-items: flex-start; 110 border-radius: 1rem; 111 position: absolute; 112 color: rgba(0, 0, 0, 0); 113 -webkit-box-shadow: rgba(255, 255, 255, 0) 4px -4px 0px; 114 box-shadow: rgba(255, 255, 255, 0) 4px -4px 0px; 115 border: solid 1px rgba(71, 71, 71, 0.425); 116 z-index: 20; 117 bottom: 0; 118 left: 0; 119 right: 0; 120 -webkit-transition: 0.4s cubic-bezier(0.87, 0, 0.13, 1); 121 transition: 0.4s cubic-bezier(0.87, 0, 0.13, 1); 122 -webkit-transition-delay: 0.08s; 123 transition-delay: 0.08s; 124 -webkit-transform: translateY(20px) translateX(-20px); 125 -ms-transform: translateY(20px) translateX(-20px); 126 transform: translateY(20px) translateX(-20px); 127} 128 129.one-div:hover::before { 130 height: 200px; 131 -webkit-transform: translateY(20px) translateX(-20px); 132 -ms-transform: translateY(20px) translateX(-20px); 133 transform: translateY(20px) translateX(-20px); 134 background: rgba(95, 77, 75, 0.466); 135 -webkit-backdrop-filter: blur(2px); 136 backdrop-filter: blur(2px); 137 color: rgba(255, 255, 255, 0); 138 -webkit-transition: 0.8s cubic-bezier(0.87, 0, 0.13, 1); 139 transition: 0.8s cubic-bezier(0.87, 0, 0.13, 1); 140 text-shadow: rgba(255, 255, 255, 0) 0 0 2rem; 141 border: solid 1px rgba(95, 77, 75, 0.466); 142} 143 144.one-div:hover::after { 145 color: rgb(224, 224, 224); 146 line-height:15px; 147 word-spacing: 0rem; 148 -webkit-backdrop-filter: blur(4px); 149 backdrop-filter: blur(4px); 150 height: 180px; 151 -webkit-transform: translateY(40px) translateX(-40px); 152 -ms-transform: translateY(40px) translateX(-40px); 153 transform: translateY(40px) translateX(-40px); 154 background-color: rgba(95, 91, 75, 0.377); 155 border: solid 1px rgba(95, 77, 75, 0.466); 156 -webkit-transition: 0.8s cubic-bezier(0.87, 0, 0.13, 1); 157 transition: 0.8s cubic-bezier(0.87, 0, 0.13, 1); 158} 159 160.one-div:active { 161 cursor: wait; 162 height: 250px; 163 -webkit-transition: 0.6s ease-in-out; 164 transition: 0.6s ease-in-out; 165 -webkit-transition-delay: 0.1s; 166 transition-delay: 0.1s; 167 -webkit-box-shadow: rgba(0, 0, 0, 0.103) 4px -4px 18px, -1rem 7rem 25px 40px rgba(0, 0, 0, 0.068); 168 box-shadow: rgba(0, 0, 0, 0.103) 4px -4px 18px, -1rem 7rem 25px 40px rgba(0, 0, 0, 0.068); 169 border: dashed 2px rgba(43, 170, 255, 0.507); 170} 171.one-div:active::before { 172 height: 210px; 173 -webkit-transform: translateY(60px) translateX(-60px); 174 -ms-transform: translateY(60px) translateX(-60px); 175 transform: translateY(60px) translateX(-60px); 176 border: solid 1px rgba(255, 92, 70, 0.466); 177 backdrop-filter: blur(2px); 178} 179 180.one-div:active::after { 181 height: 250px; 182 -webkit-transform: translateY(120px) translateX(-120px); 183 -ms-transform: translateY(120px) translateX(-120px); 184 transform: translateY(120px) translateX(-120px); 185 border: solid 1px rgba(255, 187, 84, 0.432); 186 letter-spacing: 0.8px; 187 line-height:18px; 188 font-size: 1.2rem; 189 backdrop-filter: blur(2px); 190 191} 192 193/* the only time in my life when I did not overcomplicated the HTML markup YAY */
Comments
MIT License