JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<a class="home-page" href="http://google.com">	
		<section class="col left">
			<div class="opacity-overlay"></div>
			<div class="description">
				<h1 class="homepage">
					Mobile Application <br>
					Design &amp; Development
				</h1>
				<p class="homepage">
					(iOS — Android — Windows)
				</p>
				<h1 class="view">View Projects</h1>
			</div>
		</section>
	</a>

CSS

section.col {
    width:33%;
    height: 100%;
    display: inline-block;
    float: left;
    text-align: center;
    position: relative;
    display: table;
}
section.left {
    background: url(http://www.artisanaljavascript.com/images/tradition.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100%;
    -webkit-transition: all 10s ease-in-out;
    -moz-transition: all 10s ease-in-out;
    -o-transition: all 10s ease-in-out;
    transition: all 10s ease-in-out;
}
section.left:hover {
    background-size: 120%;
}