JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
	<ul>
		<li>
			<a href="">
				<span>
					<img src="http://www.puce-et-media.com/wp-content/uploads/utilisation-de-base-des-sprites-css/menu-sprite-grille.jpg" alt="" />
					<img src="http://www.puce-et-media.com/wp-content/uploads/utilisation-de-base-des-sprites-css/menu-sprite-grille.jpg" alt="" />
				</span>
				<span>Bouquet 1</span>
			</a>
		</li>
		<li>
			<a href="">
				<span>
					<img src="http://www.puce-et-media.com/wp-content/uploads/utilisation-de-base-des-sprites-css/menu-sprite-grille.jpg" alt="" />
					<img src="http://www.puce-et-media.com/wp-content/uploads/utilisation-de-base-des-sprites-css/menu-sprite-grille.jpg" alt="" />
				</span>
				<span>Bouquet 2</span>
			</a>
		</li>
		<li>
			<a href="">
				<span>
					<img src="http://www.puce-et-media.com/wp-content/uploads/utilisation-de-base-des-sprites-css/menu-sprite-grille.jpg" alt="" />
					<img src="http://www.puce-et-media.com/wp-content/uploads/utilisation-de-base-des-sprites-css/menu-sprite-grille.jpg" alt="" />
				</span>
				<span>Bouquet 3</span>
			</a>
		</li>
	</ul>
</nav>

CSS

li {display:inline-block;vertical-align:top;}
li span:first-child{overflow:hidden;position:relative;display:block;width:148px;height:148px;}
li span+span {display:block;margin:15px auto 0;text-align:center;font:100% sans-serif;}
li img+img {position:absolute;top:-150px;left:0;opacity:0;transition:opacity .5s ease;}
li:nth-child(2) img:first-child {margin-left:-451px;}
li:nth-child(3) img:first-child {margin-left:-301px;}
li:nth-child(2) img+img {left:-451px;}
li:nth-child(3) img+img {left:-301px;}
li a {text-decoration:none;color:#161616;transition:color .5s ease;}
li a:hover img+img {opacity:1;}
li a:hover {color:brown;}