Horizontal Slide CSS

by John Allan

HTML

<div class="flexwrapper">
<div class="outer">


  <div class="container">

    <div class="item">
      a
    </div>
    <div class="item focus">
      This example uses CSS to create a classic two-sidebar layout surrounding a content block. The Flexible Box Layout Module automatically creates blocks of equal vertical size and uses as much horizontal space as available This example uses CSS to create a classic two-sidebar layout surrounding a content block. The Flexible Box Layout Module automatically creates blocks of equal vertical size and uses as much horizontal space as available This example uses CSS to create a classic two-sidebar layout surrounding a content block. The Flexible Box Layout Module automatically creates blocks of equal vertical size and uses as much horizontal space as available This example uses CSS to create a classic two-sidebar layout surrounding a content block. The Flexible Box Layout Module automatically creates blocks of equal vertical size and uses as much horizontal space as available
    </div>
    <div class="item ">
      c
    </div>
    <div class="item">
      d
    </div>

  </div>
</div>
<div class="other">

</div>
</div>

CSS

.flexwrapper {
  display:flex;
}
.outer {
  width: 500px;
  margin: 0;
}
.container {
  overflow: hidden;
  background: red;
  padding: 20px 0;
  display: flex;
}

.item {
  min-width: 100%;
  background: rgba(0, 0, 0, 0.25);
  order: 2;
}

.focus {
   order: 1;
}
.other {
  width: 300px;
  height: 100px;
  background: blue;
}