Card by oneMoreYeti
#e8e8e8
1.palette { 2 display: flex; 3 height: 300px; 4 width: 100%; 5 border-radius: 15px; 6 overflow: hidden; 7 margin: 10px; 8 /* recomiendo quitar esto/quit this */ 9} 10 11.color { 12 height: 100%; 13 flex: 1; 14 display: flex; 15 align-items: center; 16 justify-content: center; 17 color: white; 18 font-weight: 600; 19 letter-spacing: 1px; 20 transition: all 0.3s ease-out; 21 cursor: pointer; 22} 23 24.color span { 25 opacity: 0; 26 transition: opacity 0.1s linear; 27} 28 29.color:nth-child(1) { 30 background: #264653; 31} 32 33.color:nth-child(2) { 34 background: #2a9d8f; 35} 36 37.color:nth-child(3) { 38 background: #e9c46a; 39} 40 41.color:nth-child(4) { 42 background: #f4a261; 43} 44 45.color:nth-child(5) { 46 background: #e76f51; 47} 48 49.color:hover { 50 flex: 2; 51 box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 52} 53 54.color:hover span { 55 opacity: 1; 56}
807 views
Variation of acard
MIT License