JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<div class="portfolio-bar">
			<div class="row">
					<div class="large-12 small-7 small-centered columns">
				    	<div class="portfolio-thumb">
						<span>
							<b>Quad Crush</b><br>
							<p>A Refreshing Twist on Poker</p>
								<br>
							<a href="portfolio/quad-crush/index.html" class="button radius">View</a>
								</span>
							<img src="wp-content/uploads/2013/08/qc-featured.png">					
						</div>
				        <div class="portfolio-thumb">
						<span>
							<b>The Spirit Project</b><br>
							<p>Connecting Those That Hurt with Those That Help</p>
								<br>
							<a href="portfolio/spirit/index.html" class="button radius">View</a>
						</span>
						<img src="wp-content/uploads/2013/06/spirit-thumb1.jpg">					
						</div>
				                						
				        <div class="portfolio-thumb">
						<span>
							<b>Vegas.com</b><br>
							<p>The Official Vegas Travel Site</p>
							<br>
							<a href="portfolio/vegas-com/index.html" class="button radius">View</a>
						</span>
						<img src="wp-content/uploads/2013/10/vegascom-featured.png">					
						</div>
				       <div class="portfolio-thumb">
						<span>
							<b>ILVE</b><br>
							<p>Sports Wagering from Your Mobile Device!</p>
							<br>
							<a href="portfolio/ilve/index.html" class="button radius">View</a>
						</span>
						<img src="wp-content/uploads/2013/08/ilve-featured.png">					
						</div>
				        <div class="portfolio-thumb">
							<span>
								<b>TacticalNav</b><br>
								<p>Combat Tested. Military Grade.</p>
								<br>
								<a href="portfolio/tacticalnav/index.html" class="button radius">View</a>
							</span>
						<img src="wp-content/uploads/2013/10/tactnav-featured.png">					
						</div>
					</div>
			</div>
	</div>

CSS

.portfolio-bar {
  /*-webkit-background-size: 50%;*/
  background-size: 100%;
  margin:0 auto;
  width: 100%;
  height: 600px;
  overflow: hidden;
  padding: 200px 0 50px 0;
  text-align: center;
  vertical-align: middle;
}

.portfolio-thumb {
	height: 300px;
	width: 200px;
	border: 5px solid #fff;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.6);
	margin-right: 10px;
	float: left;
	overflow: hidden;
	transition: .15s linear;
	background: #000;
}
.portfolio-thumb:hover {
	height: 350px;
	margin-top: -25px;
	transition: .15s ease-out;	
}
.portfolio-thumb img {
	opacity: 1;
	transition: .15s ease-in;
}
.portfolio-thumb:hover img {
	opacity: .3;
	transition: .15s ease-out;	
}
.portfolio-thumb span {
    color: white;
	font-size: small;
    display: block;
	position: absolute;
	z-index:99;
    opacity: 0;
    padding: 10px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
    width: 200px;
	height: 350px;
	margin-top: 100px;
	transition: .15s linear;
	cursor: default;
}
.portfolio-thumb:hover span {
    opacity: 1;
	height: 350px;
	transition: .15s linear .15s;
}
.portfolio-thumb span b { 
	font-size: medium;
}


ul.portfolio-thumb li.thumb:nth-child(2) {
  margin:0 10px;
}