#un switcher d'image à base de target trick #http://youmightnotneedjs.com/ <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; } } }