JSFiddle - React, Tailwind, and code Playground

by degid

HTML

<div class="eMessage" style="text-align:left;clear:both;padding-top:0;padding-bottom:0;">
<div class="eMessage-thumb">
<a class="eMsg-img-link" href="http://torm-egan.ru/publ/comedy/monogatari_series_second_season/8-1-0-606">
 <img class="eMsg-img img-amt" style="background-image: url(http://torm-egan.ru/picture/description/id/606.jpg);">
</a>
 </div>
</div>

CSS

.eMessage-thumb {
 float: left;
 overflow: hidden;
 text-align: center;
 width: 225px;
}

.eMsg-img {
 height: 100%;
 width: 100%;
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;
}

.img-amt {
	-webkit-transition:-webkit-background-size 500ms;
	-moz-transition:-moz-background-size 500ms;
	-o-transition:-o-background-size 500ms;
	-ms-transition:-ms-background-size 500ms;
	transition:background-size 500ms;
}

.eMsg-img-link,
.eMessage-thumb {
 display: block;
 height: 100%;
}

.eMessage {
 height: 325px;
 overflow: hidden;
}

.eMessage-thumb:hover .img-amt {
	-webkit-background-size:105% auto;
	-moz-background-size:105% auto;
	background-size:105% auto;
}