Card by Shohjahon3807
This card was created for One <div> challenge
#e8e8e8
1.one-div { 2 width: 300px; 3 height: 200px; 4 background-color: #f0f5f9; 5 border-radius: 10px; 6 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 7 display: flex; 8 justify-content: center; 9 align-items: center; 10 text-align: center; 11 font-family: Arial, sans-serif; 12 font-size: 24px; 13 color: #333; 14 position: relative; 15 overflow: hidden; 16} 17 18.one-div::before { 19 content: ""; 20 position: absolute; 21 top: -10px; 22 left: -10px; 23 right: -10px; 24 bottom: -10px; 25 z-index: -1; 26 background-image: linear-gradient(45deg, #e1e8f2, #f0f5f9); 27 border-radius: 20px; 28 opacity: 0.8; 29 transform: scale(1.2); 30 filter: blur(10px); 31} 32 33.one-div:hover { 34 transform: scale(1.05); 35 transition: transform 0.3s ease; 36 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 37} 38 39.one-div:hover::before { 40 animation: gradient-animation 5s linear infinite; 41} 42 43@keyframes gradient-animation { 44 0% { 45 background-position: 0% 50%; 46 } 47 48 50% { 49 background-position: 100% 50%; 50 } 51 52 100% { 53 background-position: 0% 50%; 54 } 55} 56
706 views
706 views
MIT License