Card by Javierrocadev
#e8e8e8
1.card { 2 width: 164px; 3 height: 276px; 4 background: rgb(0, 0, 0); 5 border: 3px solid rgb(17, 4, 94); 6 border-radius: 15px; 7 position: relative; 8 padding: 5px; 9 display: flex; 10 flex-direction: column; 11 gap: 22px; 12 transition: all 1s ease; 13 color: antiquewhite; 14} 15 16.card::before { 17 content: ""; 18 width: 10px; 19 height: 10px; 20 position: absolute; 21 bottom: 10px; 22 right: 77px; 23 border-radius: 50%; 24 background-color: rgb(17, 4, 94); 25} 26 27.card__date { 28 display: flex; 29 flex-direction: column; 30 margin-top: 30px; 31} 32 33.time { 34 font-size: 2em; 35} 36 37.popup { 38 background-color: #444746; 39 border-radius: 5px; 40 display: flex; 41 flex-direction: column; 42 font-size: .8em; 43 padding: 3px; 44} 45 46.popup .title { 47 font-size: 9px; 48 color: #9cbde2; 49} 50 51.card__date , .popup { 52 opacity: 0; 53 transition: all .5s ease; 54} 55 56.card:hover { 57 transform: scale(1.2); 58 box-shadow: 0px 0px 10px 10px #289FED; 59} 60 61.card:hover .card__date , .card:hover .popup { 62 opacity: 1; 63}
681 views
Variation of acard
MIT License