JSFiddle - React, Tailwind, and code Playground

by Justin Breen

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<h2 class="orange">Featured Upcoming Events</h2>
<ul class="groupList inblockit noListStyle">
	<div class="row">
		<li class="featured">
			<div class="col-md-6">
				<div class="spot-1">
					<a href="http://www.southernnewengland.aaa.com/membership/the-2015-universal-sweepstakes">
						<img class="" src="http://www.southernnewengland.aaa.com/uploads/club1/images/insider/tiles/tile-universal_700.jpg">
						<div class="inner">
							<h3>2015 Universal Sweepstakes</h3>
							<p>
							Enter for a chance to win a trip to Universal Orlando<sup>®</sup> Resort!
							</p>
						</div>
					</a>
				</div>
			</div>
			<div class="col-md-6">
				<div class="spot-2">
					<a href="#">
						<img class="" src="http://www.southernnewengland.aaa.com/uploads/club1/images/insider/tiles/tile-disney_700.jpg">
						<div class="inner">
							<h3>Disney on Ice</h3>
							<p>
							Special offer on select performances
							</p>
						</div>
					</a>
				</div>
			</div>
		</li>
	</div>
	<div class="row">
		<h2 class="orange inblockit">And More!</h2>
		<li>
			<h3 class="marginFix">Blue Man Group Boston</h3>
			<p>
			Special offer on select performances
			</p>
			<a href="#">Get this offer</a>
		</li>
		<li>
			<h3 class="marginFix">Providence Bruins</h3>
			<p>
			Save on select home Providence Bruins hockey games!
			</p>
			<a href="#">Get this offer</a>
		</li>
		<li>
			<h3 class="marginFix">Brown University</h3>
			<p>
			AAA members save on Brown's Men's Basketball, Men's Hockey, and Women's Basketball games.
			</p>
			<a href="#">Get this offer</a>
		</li>
		<li>
			<h3 class="marginFix">Boston University</h3>
			<p>
			AAA members save on select Boston University Men's Hockey home games.
			</p>
			<a href="#">Get this offer</a>
		</li>
		<li>
			<h3...

CSS

ul {
    list-style:none;
}
h2 {
    display:inline-block;
}

.featured {
	margin:1em 0 0 0;
}
.spot-1,.spot-2 {
	background:rgba(38,171,227,1);
	position:relative;
}
.featured img {
	max-width:100%;
	opacity:.2;
}
.featured .inner {
	top:0;
	left:0;
	position:absolute;
}.featured h3,.featured p {
	margin:16px;
	padding:0;
	color:#fff;
}
.spot-1:hover img, .spot-2:hover img {opacity:1;}
.spot-1:hover p,.spot-1:hover h3,.spot-2:hover p,.spot-2:hover h3 {display:none;}

JavaScript

//  THINGS TO DO

// on hover add a little zoom action, spice it up
//
// jQuery fade/animation? Can do a lot with jQuery to make -
// this easy to port
//
// Test this with bigger images in order to acheive fluid.
// Currently the images are set width and height.

// IMAGES
// http://www.southernnewengland.aaa.com/uploads/club1/images/insider/tiles/tile-universal_700.jpg