.hero { position: relative; background-color: #ccc; overflow: hidden; } .hero::before { content: ""; display: block; padding-top: 47.5%; } .hero-slide-wrap { display: none; } .hero-slide-item { position: absolute; top: 0; left: 0; } .hero-slide-item img { width: 100%; } .hero-copy { z-index: 100; } .hero-copy.position-lefttop { top: 15%; left: 5%; bottom: auto; right: auto; } .hero-copy.position-leftbottom { bottom: 10%; left: 5%; top: auto; right: auto; } .move-slant { transition: all 10s ease-in-out; animation-name: slidermove; animation-duration: 10s; transform: translate3d(0,-15%,0); } .move-slant img { /*opacity: 0;*/ transition: all 10s ease-in-out; } @keyframes slidermove { 0% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } } @media screen and (max-width: 414px) { .hero::before { padding-top: 160%; } }