Card by ahmedyasserdev
#212121
1.unique-card { 2 position: relative; 3 width: 300px; 4 height: 200px; 5 overflow: hidden; 6 border-radius: 15px; 7 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 8 transition: transform 0.3s, box-shadow 0.3s; 9} 10 11.unique-card:hover { 12 transform: scale(1.1); 13 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 14} 15 16.card-content { 17 position: absolute; 18 top: 50%; 19 left: 50%; 20 transform: translate(-50%, -50%); 21 text-align: center; 22 color: #888; 23 z-index: 2; 24 transition: color 0.3s; 25} 26 27.unique-card:hover .card-content { 28 color: #ff7e5f; 29} 30 31.background-overlay { 32 position: absolute; 33 top: 0; 34 left: 0; 35 width: 100%; 36 height: 100%; 37 background: rgba(52, 73, 94, 0.7); 38 border-radius: 15px; 39 opacity: 0; 40 transition: opacity 0.3s; 41} 42 43.unique-card:hover .background-overlay { 44 opacity: 1; 45} 46 47.card-title { 48 font-size: 24px; 49 font-weight: bold; 50 margin-bottom: 10px; 51} 52 53.card-description { 54 font-size: 16px; 55} 56
591 views
591 views
MIT License