JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
	<div class="row">
		<div class="col-sm-8 landscape">
			<div class="image"></div>
		</div>
		<div class="col-sm-4 landscape">
			<div class="image"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-4 portrait">
			<div class="image"></div>
		</div>
		<div class="col-sm-8">
			<div class="row">
				<div class="col-sm-12 landscape">
					<div class="image"></div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6 landscape">
					<div class="image"></div>
				</div>
				<div class="col-sm-6 landscape">
					<div class="image"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-4 landscape">
			<div class="image"></div>
		</div>
		<div class="col-sm-8 landscape">
			<div class="image"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-8 landscape">
			<div class="image"></div>
		</div>
		<div class="col-sm-4 landscape">
			<div class="image"></div>
		</div>
	</div>
</div>

CSS

.landscape, .portrait {
	posisiton: relative;
}
.image {	
	background: #eee;
	margin-bottom: 30px;
	-webkit-transition: height 0.3s, -webkit-box-shadow 0.3s;
	-moz-transition: height 0.3s, -moz-box-shadow 0.3s;
	transition: height 0.3s, box-shadow 0.3s;
}

.landscape {
	height: 230px;
}
.landscape .image {
	height: 200px;
}

.portrait {
	height: 460px;
}
.portrait .image {
	height: 430px;
}

.image:hover {
	position: absolute;
	top: 0;
	left: 15px;
	right: 15px;
	bottom: -100%;
	z-index: 10;
	-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.landscape .image:hover {
	height: 430px;
}
.portrait .image:hover {
	height: 830px;
}

.container > .row:last-of-type .landscape .image  {
  top: -100%;
	left: 15px;
	right: 15px;
	bottom: 0;
}