JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

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, #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;
}
#rightImage:hover, #leftImage:hover {
    opacity:1.00;
    filter: alpha(opacity=100);
    /* For IE8 and earlier */
    background: rgba(0, 0, 0, 1.0);
}
#rightImage:hover + #overlayRight, #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 logo image */
#overlayLeft {
    visibility: visible;
}
.overlayLeft {
    /* Set rules to fill background */
    min-height: 40%;
    min-width: 40%;
    /* Set up proportionate scaling */
    width: 40%;
    height: 40%;
    /* Set up positioning */
    position: absolute;
   ...