.slideshow{ width: 100%; height: 100vh; position: relative; overflow: hidden; } .slideshow-item{ width: inherit; height: inherit; position: absolute; opacity: 0; animation: slideanim 71s infinite; } .slideshow-item:nth-child(1), .slideshow-item:nth-child(1) img{ animation-delay: 0; } .slideshow-item:nth-child(2), .slideshow-item:nth-child(2) img{ animation-delay: 10s; } .slideshow-item:nth-child(3), .slideshow-item:nth-child(3) img{ animation-delay: 20s; } .slideshow-item:nth-child(4), .slideshow-item:nth-child(4) img{ animation-delay: 30s; } .slideshow-item:nth-child(5), .slideshow-item:nth-child(5) img{ animation-delay: 40s; } .slideshow-item:nth-child(6), .slideshow-item:nth-child(6) img{ animation-delay: 50s; } .slideshow-item:nth-child(7), .slideshow-item:nth-child(7) img{ animation-delay: 60s; } .slideshow-item img{ width: 100%; height: 100%; object-fit: cover; animation: zoom 71s infinite; } .slideshow-item-text{ max-width: 50%; position: absolute; top: 50%; transform: translateY(-50%); left: 0; background-color: rgba(0,0,0,0.8); color: #fff; padding: 10rem 5rem; font-family: 'Raleway', sans-serif; } .slideshow-item-text h5{ font-size: 3.5rem; letter-spacing: 3px; } .slideshow-item-text p{ font-weight: 300; font-size: 1.6rem; margin-top: 2rem; } @keyframes slideanim{ 5%{ opacity: 1; } 30%{ opacity: 0; } } @keyframes zoom{ 100%{ transform: scale(3); } } @media screen and (max-width: 1100px){ .slideshow-item-text{ max-width: 75%; } } @media screen and (max-width: 768px){ .slideshow-item-text{ padding: 3rem 1.5rem; } } @media screen and (max-width: 456px){ .slideshow-item-text{ max-width: 100%; top: inherit; transform: translateY(0); bottom: 0; } .slideshow-item-text h5{ font-size: 2rem; } .slideshow-item-text p{ font-size: 1rem; } }