42 lines
690 B
CSS
42 lines
690 B
CSS
|
.main-video {
|
||
|
|
border-radius: var(--bs-card-border-radius);
|
||
|
|
}
|
||
|
|
.main-video picture {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cover {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.cover::before {
|
||
|
|
height: auto;
|
||
|
|
position: absolute;
|
||
|
|
content: url(../images/player-play.svg);
|
||
|
|
left: calc(50% - 40px);
|
||
|
|
top: calc(50% - 40px);
|
||
|
|
width: 80px;
|
||
|
|
z-index: 6;
|
||
|
|
}
|
||
|
|
.cover::after {
|
||
|
|
background: rgba(0, 0, 0, 0.6);
|
||
|
|
content: "";
|
||
|
|
height: 100%;
|
||
|
|
left: 0;
|
||
|
|
opacity: 0;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.cover:hover::after {
|
||
|
|
opacity: 1;
|
||
|
|
transition: all 0.2s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 767.98px) {
|
||
|
|
.cover:before {
|
||
|
|
left: calc(50% - 30px);
|
||
|
|
top: calc(50% - 30px);
|
||
|
|
width: 60px;
|
||
|
|
}
|
||
|
|
}
|