.mediaContainer {
margin: auto;
}
.hh-tv {
background: black;
position: relative;
width: 50%;
padding-top: 28.125%;
color: white;
font-size: 2.5vw !important;
margin: 0.5em auto;
overflow: hidden;
}
@media only screen and (max-width: 1115px) {
.hh-tv {
width: 100%;
padding-top: 56.25%;
font-size: 5vw !important;
}
}
.hh-tv-poster-wrapper img,
.hh-tv-bg-wrapper img,
/* .hh-tv-bg-shade, */
.hh-tv-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
}
.hh-tv-poster-wrapper img {
transition: all 500ms;
}
.hh-tv-bg-wrapper img {
height: 125%;
left: -12.5%;
visibility: hidden;
opacity: 0;
}
/* .hh-tv-bg-shade {
background: black;
opacity: 0.5;
} */
.hh-tv-content div {
text-align: center;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
visibility: hidden;
opacity: 0;
}
.hh-tv:hover .hh-tv-content div {
animation: hh-fadein 250ms forwards, hh-fadeout 250ms forwards;
}
.hh-tv:hover .hh-tv-poster-wrapper img {
visibility: hidden;
opacity: 0;
}
.hh-tv:hover .hh-tv-bg-wrapper img {
animation: hh-fadein 1.5s forwards, hh-zoom-out 11132ms forwards linear;
}
@keyframes hh-fadein {
from {
visibility: hidden;
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
@keyframes hh-fadeout {
from {
visibility: visible;
opacity: 1;
}
to {
visibility: hidden;
opacity: 0;
}
}
@keyframes hh-zoom-out {
to {
top: 0;
left: 0;
height: 100%;
}
}