<style> #stage { margin: 1em auto; width: 382px; height: 292px; } #stage a { position: absolute; } #stage a img { padding: 10px; /*border: 1px solid #ccc;*/ /* background: #fff;*/ } #stage a:nth-of-type(1) { animation-name: fader; animation-delay: 3s; animation-duration: 1s; z-index: 20; } #stage a:nth-of-type(2) { z-index: 10; } #stage a:nth-of-type(n+3) { display: none; } @keyframes fader { from { opacity: 1.0; } to { opacity: 0.0; } } </style> <div id="stage"> <a><img src="https://unsplash.it/500/450?image=766" alt="bb"></a> <a><img src="https://unsplash.it/500/450?image=889" alt="bb"></a> <a><img src="https://unsplash.it/500/450?image=1080" alt="bb"></a> </div> <script> window.addEventListener("DOMContentLoaded", function(e) { // Original JavaScript code by Chirp Internet: chirpinternet.eu // Please acknowledge use of this code by including this header. var stage = document.getElementById("stage"); var fadeComplete = function(e) { stage.appendChild(arr[0]); }; var arr = stage.getElementsByTagName("a"); for(var i=0; i < arr.length; i++) { arr[i].addEventListener("animationend", fadeComplete, false); } }, false); </script>