JSFiddle - React, Tailwind, and code Playground

by Alexis LĂłpez Espinoza

HTML

<div id="bin">
	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Adams_The_Tetons_and_the_Snake_River.jpg/250px-Adams_The_Tetons_and_the_Snake_River.jpg" id="foo" />
	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Mapungubwe_hill_limpopo.jpg/250px-Mapungubwe_hill_limpopo.jpg" id="bar" />
</div>

CSS

*{
	transition: all ease .5s;
}

#bin, #bar{
	width: 250px;
	height: 200px;
}

#foo, #bar{
	position: absolute;
}

#bar{
    opacity: 0;
	transform: scale(0);
}

JavaScript

bin.addEventListener("mouseover", function(){
	foo.style.WebkitTransform = "scale(0)";
	foo.style.opacity = 0;
	bar.style.WebkitTransform = "scale(1)";
	bar.style.opacity = 1;
}, false);

bin.addEventListener("mouseout", function(){
	foo.style.WebkitTransform = "scale(1)";
	foo.style.opacity = 1;
	bar.style.opacity = 0;
	bar.style.WebkitTransform = "scale(0)";
}, false);