Site Overlay

Slideshow on hover image Output

<div class="fadeInOut">
	<div><img src="https://www.amideveloper.com/wp-content/themes/amideveloper/slide/slider-1.jpg"></div>
	<div><img src="https://www.amideveloper.com/wp-content/themes/amideveloper/slide/slider-2.jpg"></div>
	<div><img src="https://www.amideveloper.com/wp-content/themes/amideveloper/slide/slider-3.jpg"></div>
</div>
<style>
.fadeInOut > div {
    position: absolute;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
	$(".fadeInOut > div:gt(0)").hide();
	$(".fadeInOut").mouseenter(function(){
		clearFadeInOut = setInterval(function(){
			$(".fadeInOut > div:first").fadeOut(1000).next().fadeIn(1000).end().appendTo(".fadeInOut");
		}, 1000);	
	});
	$(".fadeInOut").mouseleave(function(){
		clearInterval(clearFadeInOut);		
	});
});
</script>