.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%; } }