Css only carrousel

http://www.mbusa.com/mercedes/index?utm_expid=62343809-0

by joplomacedo

HTML

<div class="menu">
    <span class="s s1">s1 -> slide1</span>
    <span class="s s2">s2 -> slide2</span>
    <span class="s s3">s3 -> slide3</span>
    
    <div class="helper">
        <div class="slidesBox">
            <div class="slide slide1">Boo!</div>
            <div class="slide slide2">Hmm?</div>
            <div class="slide slide3">Yay!</div>
        </div>
    </div>
</div>

CSS

.menu {
  position: relative;
  font-size: 0; /*remove whitespace between spans*/    
}

.s {
    font-size: 15px; 
    -webkit-transition-delay: 999999999999999999s;
}

.s:hover {
    -webkit-transition-delay: 0s;
}

.s1:hover { background: blue; }
.s2:hover { background: red; }
.s3:hover { background: green; }

.s1:hover ~ .s,
.s2:hover ~ .s,
.s3:hover ~ .s { 
    background: none;
    -webkit-transition-delay: 0s;
}



.helper {
    overflow: hidden;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
}

.slidesBox {
    display: none;
    min-height: 90px;
    font-size: 15px;
}

.s:hover ~ .helper .slidesBox,
.helper:hover .slidesBox {
    display: block;
}

.slide {
    position: absolute;
    height: 100%; width: 100%;
    -webkit-transition: 0.12s ease-out;
    -webkit-transition-delay: 9999999999999999999999999s;
}

.slide1 { background: blue;}
.slide2 { background: red;}
.slide3 { background: green;}

.s:hover ~ .helper .slide { -webkit-transition-delay: 0; }

.s1:hover ~ .helper .slide1 { left: 0; }
.s1:hover ~ .helper .slide2 { left: 100%; }
.s1:hover ~ .helper .slide3 { left: 200%; }

.s2:hover ~ .helper .slide1 { left: -100% ; }
.s2:hover ~ .helper .slide2 { left: 0; }
.s2:hover ~ .helper .slide3 { left: 100%; }

.s3:hover ~ .helper .slide1 { left: -200%; }
.s3:hover ~ .helper .slide2 { left: -100%; }
.s3:hover ~ .helper .slide3 { left: 0; }

JavaScript

http://www.mbusa.com/mercedes/index?utm_expid=62343809-0