@Fcodingx
HOVER ME
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde explicabo enim rem odio assumenda?
#card
#2121215.9K views
CSSAdd prefixes
1.card { 2 width: 190px; 3 height: 120px; 4 padding: 0.5rem; 5 background: rgba(198, 198, 198, 0.34); 6 border-radius: 8px; 7 backdrop-filter: blur(5px); 8 position: absolute; 9 border-bottom: 3px solid rgba(255, 255, 255, 0.440); 10 border-left: 2px rgba(255, 255, 255, 0.545) outset; 11 box-shadow: -40px 50px 30px rgba(0, 0, 0, 0.280); 12 transform: skewX(10deg); 13 transition: .4s; 14 overflow: hidden; 15 color: white; 16} 17 18.card:hover { 19 height: 254px; 20 transform: skew(0deg); 21} 22 23.align { 24 padding: 1rem; 25 display: flex; 26 flex-direction: row; 27 gap: 5px; 28 align-self: flex-start; 29} 30 31.red { 32 width: 10px; 33 height: 10px; 34 border-radius: 50%; 35 background-color: #ff605c; 36 box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280); 37} 38 39.yellow { 40 width: 10px; 41 height: 10px; 42 border-radius: 50%; 43 background-color: #ffbd44; 44 box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280); 45} 46 47.green { 48 width: 10px; 49 height: 10px; 50 border-radius: 50%; 51 background-color: #00ca4e; 52 box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280); 53} 54 55.card h1 { 56 text-align: center; 57 margin: 1.3rem; 58 color: rgb(218, 244, 237); 59 text-shadow: -10px 5px 10px rgba(0, 0, 0, 0.573); 60} 61 62
HTML
1<div class="card"> 2 <div class="align"> 3 <span class="red"></span> 4 <span class="yellow"></span> 5 <span class="green"></span> 6 </div> 7 8 <h1>HOVER ME</h1> 9 <p> 10 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde explicabo enim rem odio assumenda? 11 </p> 12</div>