JSFiddle - React, Tailwind, and code Playground

by Erwin Hilario

HTML

<!--1st pic-->
<div class="Box">
	<div class="BoxPhoto">
		<img src="http://placehold.it/225x225/000000/ffffff&text=instagram_photo1" />
	</div>
	<div class="BoxHover">
			<img src="http://placehold.it/120x120/cccccc/000000&text=user_photo1" />
	</div>
</div>
<!--2nd pic-->
<div class="Box">
	<div class="BoxPhoto">
		<img src="http://placehold.it/225x225/ff0000/ffffff&text=instagram_photo2" />
	</div>
	<div class="BoxHover">
			<img src="http://placehold.it/120x120/cccccc/ff0000&text=user_photo2" />
	</div>
</div>

CSS

.Box, .BoxHover {
	height:225px; 
	width: 225px; 
	overflow: hidden;
	float: left;
	position: relative;
}
.BoxHover {
	position: absolute; 
	left: 0;
	bottom: 0px;
	text-align: center; 
	margin: 20px auto -225px auto;
	z-index: 3;
	opacity: 0;
}

JavaScript

$(document).ready(function () {
	var flag = 1;
	$(".Box").hover(function () {
		if (flag == 1) {
			$(this).children('.BoxHover').stop(true).animate({ 'margin-bottom': 0, 'opacity': '1' }, 
            { queue: false, duration: 300 });
			flag = 0;
		}
		else {
			$(this).children('.BoxHover').stop(true).animate({ 'margin-bottom': -225, 'opacity': '0' },
            { queue: false, duration: 300 });
			flag = 1;
		}

		return false;
	});
});