<div id="slider">

  	<!-- Slide Images -->
	<img id="slide-1" src="img1.jpg" alt="img description"/>
  	<img id="slide-2" src="img2.jpg" alt="img description"/>
  	<img id="slide-3" src="img3.jpg" alt="img description"/>
  	<img id="slide-4" src="img4.jpg" alt="img description"/>
	
	<!-- Navigation for the slides -->
	<ul>
		<li><a href="#slide-1">1</a></li>
		<li><a href="#slide-2">2</a></li>
		<li><a href="#slide-3">3</a></li>
		<li><a href="#slide-4">4</a></li>
	</ul>
</div>
SCSS
#slider {
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 200px;
    
    &:target {
      transition: all .5s ease-in-out;
    }
    
    &:not(:target), 
    &:target ~ img#slide-4  {
      position: relative;
      opacity: 0;
    }

    // set initially visible
    &#slide-4 {
      position: absolute;
      opacity: 1;
     }
  }
}