title: css html based slider / show part of next slide on hover
body: <p>Been trying for a longer time now to adjust the effect on the slider below. The effect I am trying to create is that when you hover the right or left side it shows a bit of the next or previous slide.</p>
  
  <p>Example: when the active slide is slide 1 and you hover the left side (say 10% of the total slide) it should show a piece of the previous slide and when hovering the right side of slide 1 (again 10%) it should show a bit of the next slide. </p>
  
  <p>I am not completely sure whether this effect is possible in CSS/HTML, however it might work with a hover state. But if it should be possible, one of you should probably know that :) </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Slider wrapper*/
    .css-slider-wrapper {
        display: block;
        background: #FFF;
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    /* Slider */
    .slider {
        width: 100%;
        height: 100%;
        background: red;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 1;
        z-index: 0;
        
        display: flex;
        display: -webkit-flex;
        display: -ms-flexbox;
        flex-direction: row;
        flex-wrap: wrap;
        -webkit-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        justify-content: center;
        align-content: center;
        
        -webkit-transition: -webkit-transform 1600ms;
        transition: -webkit-transform 1600ms, transform 1600ms;
        -webkit-transform: scale(1);
        transform: scale(1);
        }
    /* each slide background color */ 
    .slide1 {
        background: #00bcd7;
        left: 0;
    }
    .slide2 {
        background: #009788;
        left: 100%
    }
    .slide3 {
        background: #ff5608;
        left: 200%
    }
    .slide4 {
        background: #607d8d;
        left: 300%;
    }
    .slider &gt; div {
      text-align: center;
    }
    /* Slider inner content */
    .slider h2 {
        color: #FFF;
        font-weight: 900;
        text-transform: uppercase;
        font-size: 45px;
        line-height: 120%;
        opacity: 0;
        -webkit-transform: translateX(500px);
        transform: translateX(500px);
    }
    .slider .button {
        color: #FFF;
        padding: 5px 50px;
        background: rgba(255,255,255,0.3);
        text-decoration: none;
        opacity: 0;
        font-size: 15px;
        line-height: 30px;
        display: inline-block;
        -webkit-transform: translateX(-500px);
        transform: translateX(-500px);
    }
    .slider h2, .slider .button {
        -webkit-transition: opacity 800ms, -webkit-transform 800ms;
        transition: transform 800ms, opacity 800ms;
        -webkit-transition-delay: 1s; /* Safari */
        transition-delay: 1s;
    }
    /* Next and previous button */ 
    .control {
        position: absolute;
        top: 50%;
        width: 50px;
        height: 50px;
        margin-top: -25px;
        z-index: 55;
    }
    .control label {
        z-index: 0;
        display: none;
        text-align: center;
        line-height: 50px;
        font-size: 50px;
        color: #FFF;
        cursor: pointer;
        opacity: 0.2;
    }
    .control label:hover {
       opacity: 0.5;
    }
    .next {
      right: 1%;
    }
    .previous {
      left: 1%;
    }
    
    /* Slider pagination */ 
    .slider-pagination {
        position: absolute;
        bottom: 20px;
        width: 100%;
        left: 0;
        text-align: center;
        z-index: 1000;
    }
    .slider-pagination label {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        background: rgba(255,255,255,0.2);
        margin: 0 2px;
        border: solid 1px rgba(255,255,255,0.4);
        cursor: pointer;
        }
        
    /* Slider control active css */
    .slide-radio1:checked ~ .next .numb2, 
    .slide-radio2:checked ~ .next .numb3, 
    .slide-radio3:checked ~ .next .numb4, 
    .slide-radio2:checked ~ .previous .numb1, 
    .slide-radio3:checked ~ .previous .numb2, 
    .slide-radio4:checked ~ .previous .numb3 {
        display: block;
        z-index: 1
    }
    /* Slider pagination active css */
    .slide-radio1:checked ~ .slider-pagination .page1, 
    .slide-radio2:checked ~ .slider-pagination .page2, 
    .slide-radio3:checked ~ .slider-pagination .page3, 
    .slide-radio4:checked ~ .slider-pagination .page4 {
        background: rgba(255,255,255,1)
    }
    
    /* css for sliding  effect when you click on control button*/
    .slide-radio1:checked ~ .slider {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    .slide-radio2:checked ~ .slider {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    .slide-radio3:checked ~ .slider {
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%);
    }
    .slide-radio4:checked ~ .slider {
        -webkit-transform: translateX(-300%);
        transform: translateX(-300%);
    }
    
    .slide-radio1:checked ~ .slide1 h2, 
    .slide-radio2:checked ~ .slide2 h2, 
    .slide-radio3:checked ~ .slide3 h2, 
    .slide-radio4:checked ~ .slide4 h2, 
    .slide-radio1:checked ~ .slide1 .button, 
    .slide-radio2:checked ~ .slide2 .button, 
    .slide-radio3:checked ~ .slide3 .button, 
    .slide-radio4:checked ~ .slide4 .button {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
    
  @media only screen and (max-width: 767px) {
    .slider h2 {
        font-size: 20px;
    }
    .slider &gt; div {
        padding: 0 2%
    }
    .control label {
        font-size: 35px;
    }
    .slider .button {
        padding: 0 30px;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="css-slider-wrapper"&gt;
      
      &lt;input type="radio" name="slider" class="slide-radio1" checked id="slider_1"&gt;
      &lt;input type="radio" name="slider" class="slide-radio2" id="slider_2"&gt;
      &lt;input type="radio" name="slider" class="slide-radio3" id="slider_3"&gt;
      &lt;input type="radio" name="slider" class="slide-radio4" id="slider_4"&gt;
      
      
      &lt;div class="slider-pagination"&gt;
          
          &lt;label for="slider_1" class="page1"&gt;&lt;/label&gt; 
          &lt;label for="slider_2" class="page2"&gt;&lt;/label&gt;
          &lt;label for="slider_3" class="page3"&gt;&lt;/label&gt;
          &lt;label for="slider_4" class="page4"&gt;&lt;/label&gt;
      &lt;/div&gt;
      
      &lt;div class="next control"&gt;
          &lt;label for="slider_1" class="numb1"&gt;&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/label&gt;
          &lt;label for="slider_2" class="numb2"&gt;&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/label&gt;
          &lt;label for="slider_3" class="numb3"&gt;&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/label&gt;
          &lt;label for="slider_4" class="numb4"&gt;&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="previous control"&gt;
          &lt;label for="slider_1" class="numb1"&gt;&lt;i class="fa fa-arrow-circle-left"&gt;&lt;/i&gt;&lt;/label&gt;
          &lt;label for="slider_2" class="numb2"&gt;&lt;i class="fa fa-arrow-circle-left"&gt;&lt;/i&gt;&lt;/label&gt;
          &lt;label for="slider_3" class="numb3"&gt;&lt;i class="fa fa-arrow-circle-left"&gt;&lt;/i&gt;&lt;/label&gt;
          &lt;label for="slider_4" class="numb4"&gt;&lt;i class="fa fa-arrow-circle-left"&gt;&lt;/i&gt;&lt;/label&gt;
      &lt;/div&gt;
      
      
      &lt;div class="slider slide1"&gt;
          &lt;div&gt;
              &lt;img src="http://fillmurray.com/801/450"&gt;&lt;/img&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="slider slide2"&gt;
          &lt;div&gt;
              &lt;img src="http://fillmurray.com/801/450"&gt;&lt;/img&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="slider slide3"&gt;
          &lt;div&gt;
              &lt;img src="http://fillmurray.com/801/450"&gt;&lt;/img&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="slider slide4"&gt;
          &lt;div&gt;
              &lt;img src="http://fillmurray.com/801/450"&gt;&lt;/img&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>