title: Pure CSS image slider
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  html,body{
  height:100%;
  width:100%;
  margin:0%;
  Padding:0%;
  }
  .wrap{
  height:100%;
  width:100%;
  position:relative;
  overflow:hidden;
  background:#120103;
  color:#fff;
  text-align:center;
  }
  header{
      background:#3E474F;
      box-shadow:0 .5em 1em #111;
      position:absolute;
      z-index:900;
      width:100%;
  }
  header label{
      color:#788188;
      cursor:pointer;
      display:inline-block;
      line-height:4.25em;
      font-size:.667em;
      font-weight:bold;
      padding:0 1em;
  }
  header label:hover{
      background:#2e353b;
  }
  
  .slide{
      width:100%;
      height:100%;
      position:absolute;
      top:0%;
      left:100%;
      z-index:10;
      padding:8em 1em 0;
      background-color:#120103;
      background-position:50% 50%;
      background-size:cover;
      transition:left 0s .75s;
  }
  
  
  [id^= "slide"]:checked + .slide{
      left:0;
      z-index:100;
      transition:left .65s ease-out;
  }
  
   img{
       height:250px;
       width:250px;
      Margin:20px;
      Overflow:none;
      display:block;
      }
  .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
  }
  
  .slide-one:hover .overlay{
  opacity:0.5;
  }
  
  .slide-two:hover .overlay{
  opacity:0.5;
  }
  
  .slide-three:hover .overlay{
  opacity:0.5;
  }
  
  .text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
  .slide-one{
  background-image:url('wow.jpg');
  }
  .slide-two{
  background-image:url('Anonymous.jpg ');
  }
  .slide-three{
  background-image:url('1.jpg');
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="wrap"&gt;
  &lt;header&gt;
  &lt;label for="slide-1-trigger"&gt;Slide One&lt;/label&gt;
  &lt;label for="slide-2-trigger"&gt;Slide Two&lt;/label&gt;
  &lt;label for="slide-3-trigger"&gt;Slide Three&lt;/label&gt;
  &lt;/header&gt;
  &lt;input id="slide-1-trigger" type="radio" name="slide" checked&gt;
  &lt;section class="slide slide-one"&gt;
  
  &lt;div class="overlay"&gt;
  &lt;div class="text"&gt;Ethical Hacking is licensed hacking.... &lt;a 
  href="https://en.wikipedia.org/wiki/Certified_Ethical_Hacker"&gt;Read More&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  &lt;input id="slide-2-trigger" type="radio" name="slide" &gt;
  &lt;section class="slide slide-two" &gt;
  &lt;div class='overlay'&gt;
  &lt;div class="text"&gt;A rather famous group of hackers and tech savvys spread 
  across the world....&lt;a 
  href="https://en.wikipedia.org/wiki/Anonymous_(group)"&gt;Read More&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  &lt;input id="slide-3-trigger" type="radio" name="slide" &gt;
  &lt;section class="slide slide-three" &gt;
  &lt;div class='overlay'&gt;
  &lt;div class="text"&gt;Just Checking&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Hello everybody , i was watching a video on making a CSS image slider after watching the whole video i wrote the above code but am having some problem understanding this particular piece of code:  </p>
  
  <pre><code>[id^= "slide"]:checked + .slide{
      left:0;
      z-index:100;
      transition:left .65s ease-out;
  }
  </code></pre>
  
  <p>I need help understanding this part of the code. Thank you for help in advance :)</p>