body {
background-color: rgb(20, 23, 26);
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.cards {
position: fixed;
top: 50%;
left: 50%;
text-align: center;
width: 100%;
list-style: none;
transform: translateY(-50%) translateX(-50%);
}
.cards li {
position: relative;
vertical-align: middle;
display: inline-block;
width: 200px;
height: 120px;
transition-duration: .5s;
overflow: hidden;
cursor: pointer;
}
.cards li .card-content {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center top;
}
.cards li:hover {
transition-delay: .3s;
width: 300px;
height: 180px;
}