JSFiddle - React, Tailwind, and code Playground

by dmcgrew

HTML

<a href="#" class="block size1 annualreport nonprofit">
    	    <div class="inner_block">
    	        <img src="http://i.imgur.com/8uuZB.jpg" />
    	    </div>
	    </a>

CSS

body {background-color:#78735e;}

.block {
 position: absolute;
left: 0px;
top: 0px;
-webkit-transform: translate3d(0px, 0px, 0px);
border-radius: 10px;
margin: 6px;
-webkit-box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
overflow:hidden;
}

.size1 {
width: 226px;
height: 464px;
min-width: 160px;
max-width: 226px;
}

.inner_block {
overflow: hidden;
border-radius: 10px;
}

.block img {
width: 100%;
height: 100%;
-moz-transition: all 0.1s;
-webkit-transition: all 0.1s;
transition: all 0.1s;
}

.block img:hover {width:115%; height:115%;}