Card by Javierrocadev
#e8e8e8
1.card { 2 width: 260px; 3 height: 170px; 4 background-color: #ffb3b3; 5 border-radius: 15px; 6 border: 1px solid rgb(156, 151, 151); 7 position: relative; 8 transition: all .3s ease; 9} 10 11.card__icons { 12 display: flex; 13 flex-direction: column; 14 align-items: flex-end; 15 padding-right: 10px; 16 padding-top: 10px; 17 gap: 10px; 18 opacity: 0; 19 transition: all .3s ease; 20 cursor: pointer; 21} 22 23.card__time { 24 position: absolute; 25 right: 10px; 26 bottom: 10px; 27 display: flex; 28 justify-content: center; 29 align-items: center; 30 font-size: 1em; 31 font-weight: lighter; 32 border-radius: 5px; 33 text-align: center; 34 padding: 2px 8px; 35 color: whitesmoke; 36 background-color: rgb(77, 67, 67); 37} 38 39.svg-icon { 40 background-color: rgb(77, 67, 67); 41 fill: #ece6e6; 42 width: 35px; 43 height: 35px; 44 border-radius: 5px; 45 padding: 2px; 46 transition: all .5s ease-in-out; 47} 48 49.card:hover { 50 opacity: 0.8; 51 animation: video 5s ease; 52} 53 54.card:hover .card__icons { 55 opacity: 1; 56} 57
808 views
808 views
MIT License