JSFiddle - React, Tailwind, and code Playground

HTML

<a href="" target="_blank">
			<div id="left">	
				<div id="leftImage">
					<img src="http://www.lindasballoons.com/Images/balloons.png" alt="flowerBackground" class="leftImage">				
				</div>
				<div id="overlayLeft">
					<img src="http://clipartist.net/openclipart.org/2013/June/pink_flower-999px.png" class="overlayLeft">
				</div>
			</div>
		</a>
		<a href="" target="_blank">
		<div id="right">
			<div id="rightImage">
				<img src="http://buubi.com/wp-content/uploads/2013/03/high-quality-images-of-a-colourful-spring-flower-garden.jpg" alt="fishBackground" class="rightImage">
			</div>
			<div id="overlayRight">
				<img src="http://www.wpclipart.com/holiday/balloons/round_balloon/balloon_round_red_T.png" alt="flowerOverlayLogo" class="overlayRight">
			</div>
		</div>
		</a>

CSS

body {
    background: #ffff;
}

 /* Setup for the halves of the screen */

#right {
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 50%;
	
	/* Set up proportionate scaling */
	width: 50%;
	height: auto;
	
	position: fixed;
	top: 0;
	right: 0;   
	
	background: #389A7A;
	background-size:cover;	
}

#left {
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 50%;

	/* Set up proportionate scaling */
	width: 50%;
	height: auto;
	
	position: fixed;
	top: 0;
	left: 0; 
	
	background: #0C4270;
	background-size:cover;	
}

 /* Setup for the image containers */

#rightImage {
 	opacity:0.15;
	filter: alpha(opacity=15); /* For IE8 and earlier */
	background: rgba(0, 0, 0, 0.15);	
	-webkit-transition: opacity 2.00s ease;
	-moz-transition: opacity 2.00s ease;		
	transition: opacity 2.00s ease;	
	position: relative;	
}

#rightImage:hover {
 	opacity:1.00;
	filter: alpha(opacity=100); /* For IE8 and earlier */	
	background: rgba(0, 0, 0, 1.0);
}

#rightImage:hover + #overlayRight {
	visibility: hidden;
}

#leftImage {	
	opacity:0.15;
	filter: alpha(opacity=15); /* For IE8 and earlier */
	background: rgba(0, 0, 0, 0.15);	
	-webkit-transition: opacity 2.00s ease;
	-moz-transition: opacity 2.00s ease;		
	transition: opacity 2.00s ease;	
	position: relative;		
	overflow: hidden;	
}

#leftImage:hover {
	opacity:1.00;
	filter: alpha(opacity=100); /* For IE8 and earlier */
	background: rgba(0, 0, 0, 1.0);	
}

#leftImage:hover + #overlayLeft{
	visibility: hidden;	
}

 /* Setup for the images */

.rightImage {
/* Set rules to fill background */	
	min-width: 50%;
	min-height: 100%;
	
	/* Set up proportionate scaling */
	width: 50%;
	height: auto;
	
	/* Set up positioning */
	position: fixed;
	top: 0px;
	right: 0;
}

.leftImage {
	/* Set rules to fill background */
	min-width: 50%;
	min-height: 100%;
	
	/* Set up proportionate scaling */
	width: 50%;
	height: auto;
	
	/* Set up positioning */
	position: fixed;
	top: 0px;
	left: 0;
}

 /* Setup for the...