Card by Lmickk2
This card was created for One <div> challenge
#212121
1.one-div { 2 width: 8em; 3 height: 12em; 4 background-color: rgb(69, 152, 201); 5 position: relative; 6 display: flex; 7 align-items: center; 8 justify-content: center; 9} 10 11.one-div::before { 12 content: "One"; 13 position: absolute; 14 top: 0; 15 width: 8em; 16 height: 12em; 17 background-color: rgb(235, 110, 101); 18 transition: opacity 0.3s ease-in-out; 19 z-index: -1; 20 display: flex; 21 align-items: center; 22 justify-content: center; 23} 24 25.one-div::after { 26 content: "Div"; 27 position: absolute; 28 top: 0; 29 width: 8em; 30 height: 12em; 31 background-color: rgb(230, 190, 10); 32 transition: opacity 0.3s ease-in-out; 33 z-index: -1; 34 display: flex; 35 align-items: center; 36 justify-content: center; 37} 38 39.one-div:hover:before { 40 left: -7em; 41 margin-top: 1em; 42 transform: rotate(-15deg); 43 animation: slide-left 0.8s; 44 transition: 0.5s ease-in-out; 45} 46 47.one-div:hover:after { 48 right: -7em; 49 margin-top: 1em; 50 transform: rotate(15deg); 51 animation: slide-right 0.8s; 52 transition: 0.5s ease-in-out; 53} 54 55@keyframes slide-left { 56 0% { 57 left: 0; 58 } 59 60 100% { 61 left: -3em; 62 } 63 64 100% { 65 left: -7em; 66 } 67} 68 69@keyframes slide-right { 70 0% { 71 right: 0; 72 } 73 74 100% { 75 right: -3em; 76 } 77 78 100% { 79 right: -7em; 80 } 81} 82 83.one-div:hover { 84 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.596); 85} 86 87.one-div:hover::after { 88 box-shadow: 3px 1px 10px rgba(0, 0, 0, 0.596); 89} 90 91.one-div:hover::before { 92 box-shadow: -3px 1px 10px rgba(0, 0, 0, 0.596); 93} 94
984 views
984 views
MIT License