.carousel-wrapper{ height:450px; position:relative; width:800px; margin:0 auto; margin-top: 25px; margin-bottom: -20px; } .carousel-item{ position:absolute; top:0; bottom:0; left:0; right:0; padding:25px 50px; opacity:0; transition: all 0.5s ease-in-out; border-radius: 10px; } .arrow{ border: solid #FACF46; border-width: 0 3px 3px 0; display: inline-block; padding: 12px; } .arrow-prev{ left:-30px; position:absolute; top:50%; transform:translateY(-50%) rotate(135deg); } .arrow-next{ right:-30px; position:absolute; top:50%; transform:translateY(-50%) rotate(-45deg); } .light{ color:white; } @media (max-width: 480px) { .arrow, .light .arrow { background-size: 10px; background-position: 10px 50%; } } /*Select every element*/ [id^="item"] { display: none; } .item-1 { z-index: 2; opacity: 1; background:url('images/NewSlideShowImages/TwisterOS.png'); background-size:cover; } .item-2 { background:url('images/NewSlideShowImages/TwisterOS-Dark.png'); background-size:cover; } .item-3{ background:url('images/NewSlideShowImages/Twister95.png'); background-size:cover; } .item-4{ background:url('images/NewSlideShowImages/TwisterXP.png'); background-size:cover; } .item-5{ background:url('images/NewSlideShowImages/Twister7.png'); background-size:cover; } .item-6{ background:url('images/NewSlideShowImages/Twister10.png'); background-size:cover; } .item-7{ background:url('images/NewSlideShowImages/Twister10-Dark.png'); background-size:cover; } .item-8{ background:url('images/NewSlideShowImages/Twister11-slideshow.png'); background-size:cover; } .item-9{ background:url('images/NewSlideShowImages/Twister11-Dark-slideshow.png'); background-size:cover; } .item-10{ background:url('images/NewSlideShowImages/iTwister.png'); background-size:cover; } .item-11{ background:url('images/NewSlideShowImages/iTwister-Dark.png'); background-size:cover; } .item-12{ background:url('images/NewSlideShowImages/iTwisterSur.png'); background-size:cover; } .item-13{ background:url('images/NewSlideShowImages/iTwisterSur-Dark.png'); background-size:cover; } *:target ~ .item-1 { opacity: 0; } #item-1:target ~ .item-1 { opacity: 1; } #item-2:target ~ .item-2, #item-3:target ~ .item-3 { z-index: 2; opacity: 1; } #item-3:target ~ .item-3, #item-4:target ~ .item-4 { z-index: 3; opacity: 1; } #item-4:target ~ .item-4, #item-5:target ~ .item-5 { z-index: 4; opacity: 1; } #item-5:target ~ .item-5, #item-6:target ~ .item-6 { z-index: 5; opacity: 1; } #item-6:target ~ .item-6, #item-7:target ~ .item-7 { z-index: 6; opacity: 1; } #item-7:target ~ .item-7, #item-8:target ~ .item-8 { z-index: 7; opacity: 1; } #item-8:target ~ .item-8, #item-9:target ~ .item-9 { z-index: 8; opacity: 1; } #item-9:target ~ .item-9, #item-10:target ~ .item-10 { z-index: 9; opacity: 1; } #item-10:target ~ .item-10, #item-11:target ~ .item-11 { z-index: 10; opacity: 1; } #item-11:target ~ .item-11, #item-12:target ~ .item-12 { z-index: 11; opacity: 1; } #item-12:target ~ .item-12, #item-13:target ~ .item-13 { z-index: 12; opacity: 1; } #item-13:target ~ .item-13, #item-1:target ~ .item-1 { z-index: 12; opacity: 1; }