title: CSS image slider with fade in
body: <p>I have been trying to create a simple image slider showcasing four images for a website. I have managed to create the slideshow, however the transition between each images is really fast and I want a bit of a fade in effect so that it's smoother. A lot of the questions on here already suggest using jQuery but I am trying to do it with just CSS. I've also explored the animate.css but couldn't get it to work. Appreciate any/all help given. Thanks :) </p>
  
  <p>Heres the code so far:</p>
  
  <p>HTML</p>
  
  <pre><code>   &lt;div class="slider"&gt;
        &lt;div class="feature"&gt;
        &lt;/div&gt;
        &lt;div class="overlay"&gt;
  
        &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS</p>
  
  <pre><code>.feature {
     animation: slide 3s;
  
  }
  
  .slider {
     background-repeat: no-repeat;
     background-size: cover;
     width: 100%;
     height: 80vh;
     animation: slide 10s infinite;
  }
  
  .overlay {
     color: #fff;
     width: 100%;
     height: 80vh;
     background-color: rgba(0, 0, 0, 0.5);
  }
  
  
  
  @keyframes slide {
     0%{
        background-image: url(../resources/feature/Feature1.jpg);
     }
  
     25%{
        background-image: url(../resources/feature/Feature1.jpg);
     }
  
     25.1%{
        background-image: url(../resources/feature/Feature2.jpg);
     }
  
     50%{
        background-image: url(../resources/feature/Feature2.jpg);
     }
     50.01%{
        background-image: url(../resources/feature/Feature3.jpg);
     }
  
     75%{
        background-image: url(../resources/feature/Feature3.jpg);
     }
  
     75.01%{
        background-image: url(../resources/feature/Feature4.jpg);
     }
  
     100%{
        background-image: url(../resources/feature/Feature4.jpg);
     }
  }
  </code></pre>