Card by Javierrocadev
#e8e8e8
1.card { 2 width: 350px; 3 height: 225px; 4 background: rgba(114,113,114); 5 border-radius: 15px; 6 padding: 10px; 7 color: white; 8 display: flex; 9 flex-direction: column; 10 box-shadow: inset 0px 0px 1px black; 11 transition: all .2s ease-in; 12} 13 14.card::after { 15 content: "hover video"; 16 font-size: 1.4em; 17 font-weight: 800; 18 position: absolute; 19 right: 50%; 20 top: 50%; 21 transform: translate(50%,-50%); 22} 23 24.up { 25 display: flex; 26 flex-direction: row; 27 justify-content: space-between; 28} 29 30.up .right { 31 display: flex; 32 gap: 20px; 33} 34 35.playbar { 36 flex-grow: 1; 37 display: flex; 38 justify-content: center; 39 align-items: end; 40} 41 42.bar { 43 width: 340px; 44 height: 8px; 45 margin-bottom: 8px; 46 background-color: rgba(170, 163, 163, 0.356); 47} 48 49.bar::after { 50 content: ""; 51 width: 10px; 52 height: 8px; 53 position: absolute; 54 background: rgb(167, 57, 57); 55 animation: example 25s ease; 56} 57 58.down { 59 display: flex; 60 flex-direction: row; 61 align-items: center; 62 justify-content: space-between; 63} 64 65.down__icons { 66 display: flex; 67 flex-direction: row; 68 justify-content: center; 69 align-items: center; 70 gap: 20px; 71} 72 73.pause { 74 width: 50px; 75 height: 50px; 76 fill: rgb(241, 239, 239); 77} 78 79.time { 80 font-size: .85em; 81} 82 83.svg-icon { 84 width: 30px; 85 height: 30px; 86 padding: 5px; 87 border-radius: 50%; 88 ; 89 fill: rgb(241, 239, 239); 90} 91 92.card * { 93 opacity: 0; 94 transition: all .2s ease-in; 95} 96 97.card:hover * { 98 opacity: 1; 99} 100 101.card:hover { 102 box-shadow: inset 0px 10px 36px -13px rgba(0,0,0,0.75); 103} 104 105.svg-icon:hover { 106 background-color: rgba(3, 5, 5, 0.5); 107} 108 109@keyframes example { 110 0% { 111 width: 0px; 112 } 113 114 100% { 115 width: 330px; 116 } 117} 118
1.3K views
1.3K views
MIT License