JSFiddle - React, Tailwind, and code Playground

HTML

<div class="my_div" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);">
    <span><img src="http://i.imgur.com/0Onvos6.png"></span>
</div>
<div class="my_div" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);">
    <span><img src="http://i.imgur.com/0Onvos6.png"></span>
</div>
<div class="my_div" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);">
    <span><img src="http://i.imgur.com/0Onvos6.png"></span>
</div>
<div class="my_div" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);">
    <span><img src="http://i.imgur.com/0Onvos6.png"></span>
</div>

CSS

.my_div {
	width: 402px;
	height: 224px;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
}
.my_div { //для демо страницы
	float: left;
	margin: 1em;
}
.my_div span {
	position: absolute;
	top: 402px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.my_div:hover > span{
	top: 0;
}