JSFiddle - React, Tailwind, and code Playground

HTML

<div class="thrumb-wrapp">
					<div class="thrumb">
						<div class="wrapp">
							<h2>Превью</h2>
							<p>Описание</p>
						<a href="http://yandex.ru" target="_blank">http://yandex.ru</a>
						</div>
						<div class="wrapper">
						<img src="http://vsesvit-news.info/pictures/1283414300_hasky.jpg" id="img" width="250">
						</div>
					</div>
                    <div class="thrumb">
						<div class="wrapp">
							<h2>Превью</h2>
							<p>Описание</p>
						<a href="http://yandex.ru" target="_blank">http://yandex.ru</a>
						</div>
						<div class="wrapper">
						<img src="http://ellie10.blogas.lt/files/2012/05/brown-dog.jpg" id="img" width="250">
						</div>
					</div>
				</div>

CSS

body {
    background: url(http://subtlepatterns.com/patterns/grey_wash_wall.png);
}
.thrumb .wrapp {
	left: 0;
	margin: 20px;
	position: absolute;
	top: 0;
	height: 158px;
}
.thrumb-wrapp {
	display: inline-block;
	margin-top: 20px;
}
.thrumb {
	background: url(http://subtlepatterns.com/patterns/squared_metal.png);
	float: left;
	position: relative;
	width: 300px;
	height: 200px;
	overflow: hidden;
	border: 1px solid #fff;
}
.thrumb .wrapper {
	height: 200px;
	left: 0;
	position: absolute;
	top: 0;
	width: 300px;
}
.thrumb .wrapper img {
	height: 200px;
	width: 300px;
	position: relative;
	z-index: 2;
}
.wrapp h2 {
	font-size: 15px;
	margin: 0;
	padding: 0;
	color: #259ADD;
}
.wrapp > p {
	font-size: 13px;
	line-height: 12px;
	margin: 10px 0;
}
.wrapp a {
	font-family: Trebuchet MS, Arial;
	position: absolute;
	z-index: 1;
	color: #259ADD;
	bottom: 0;
	font-size: 13px;
}
.wrapp a:hover {
	color: #48DFF9;
}

JavaScript

$(function(){
			$('.thrumb').mouseenter(function(){
				$('img', this).stop().animate({marginTop: '80%', opacity: 0},600);
            }).mouseleave(function(e){
              
				$('img', this).stop().animate({marginTop: '0%', opacity: 1},600);
			});
        });