JSFiddle - React, Tailwind, and code Playground

by rohanmod27

HTML

<div class="avdhoot-image-gallery" id="avdhoot-image-gallery">

	<div class="avdhoot-pack">
		<div class="avdhoot-ctr">
			<img width="200" height="150" src="http://3.bp.blogspot.com/-byMVZ9p5iC8/Ud582YB0qFI/AAAAAAAABII/0N-_0z5KgaY/s1600/00+(7).jpg+(680%C3%971024).png" alt="beauty">
		</div>
		<div class="avdhoot-des">
			<div class="des">
				<h4>Lorem Ipsum</h4>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
				<p><a class="more" href="#">More</a></p>
			</div>
		</div>
	</div>

	<div class="avdhoot-pack">
		<div class="avdhoot-ctr">
			<img width="200" height="150" src="http://4.bp.blogspot.com/-Edak-e7HVNA/Ud583G0nwCI/AAAAAAAABIQ/3rq_y4X7OqE/s1600/00+(8).jpg+(800%C3%971200).png" alt="beauty">
		</div>
		<div class="avdhoot-des">
			<div class="des">
				<h4>Lorem Ipsum</h4>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
				<p><a class="more" href="#">More</a></p>
			</div>
		</div>
	</div>

	<div class="avdhoot-pack">
		<div class="avdhoot-ctr">
			<img width="200" height="150" src="http://4.bp.blogspot.com/-8VX1I9GU5c8/Ud585aKgGZI/AAAAAAAABIY/Ud3eiTQ6YDw/s1600/4.jpg+(800%C3%971200).png" alt="beauty">
		</div>
		<div class="avdhoot-des">
			<div class="des">
				<h4>Lorem Ipsum</h4>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
				<p><a class="more" href="#">More</a></p>
			</div>
		</div>
	</div>

	<div class="avdhoot-pack">
		<div class="avdhoot-ctr">
			<img width="200" height="150" src="http://1.bp.blogspot.com/-Mbxn1n8cSdE/Ud580LDmrFI/AAAAAAAABIA/F7_a0-T9x7Q/s1600/000000125270-raluca_negrea-fullsize.jpg" alt="beauty">
		</div>
		<div class="avdhoot-des">
			<div class="des">
				<h4>Lorem Ipsum</h4>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
				<p><a class="more" href="#">More</a></p>
			</div>
		</div>
	</div>

	<div class="avdhoot-pack">
		<div class="avdhoot-ctr">
			<img...

CSS

* {
  margin:0;
  padding:0;
}

body {background-color:#f5f5f5}

.avdhoot-image-gallery {
  width:642px;
  margin:50px auto;
}

.avdhoot-pack {
  width:210px;
  height:160px;
  overflow:hidden;
  background-color:white;
  border:1px solid #ccc;
  float:left;
  margin:1px 1px;
  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;
}

.avdhoot-ctr,
.avdhoot-des {
  height:150px;
  border:5px solid white;
  background-color:#ffc;
  transition:margin-top .4s ease-out .4s;
}

.avdhoot-ctr img {
  width:200px;
  height:150px;
  padding:0 0;
  margin:0 0;
  border:none;
  outline:none;
  max-width:none;
  max-height:none;
  background-color:black;
}

.avdhoot-des h4,
.avdhoot-des p {
  margin:0 0 .2em;
  padding:0 0;
  height:70px;
}

.avdhoot-des h4 {
  font-size:120%;
  height:auto;
}

.avdhoot-des .des {
  padding:10px 12px;
  overflow:hidden;
}

.avdhoot-des .more {
  color:white;
  text-decoration:none;
  display:block;
  text-align:center;
  font-weight:bold;
  background-color:#f9a;
  height:26px;
  line-height:26px;
  margin:10px 0 0;
}

.avdhoot-pack:hover {border-color:#bbb}
.avdhoot-pack:hover .avdhoot-ctr {margin-top:-160px}
.avdhoot-des .more:hover {background-color:#b50b42}