JSFiddle - React, Tailwind, and code Playground

HTML

<div id="full-hp">
    <div class="home-heroImage">
         <div class="slide-out">
            <div class="hover-products"><a href="tbd">
                <img src="http://cookware.lecreuset.com/wcsstore/CVWEB/images/home/hp_hover-prod1_090512.jpg" alt="Our Exclusive Breakfast Set" border="0" height="90" width="110" /></a>
                <a id="hover-prod1" href="tbd"></a>
             </div>
        </div>
    </div>
</div>

CSS

#full-hp{padding: 0; margin: 0 auto; width: 400px; height: 300px; background-color: #fcba2e}


.home-heroImage{padding: 0 0 20px 0;
margin: 0px auto;
width:400px;
height: 300px;
position: relative;
overflow:hidden;
}
.home-heroImage img{display: block;}
/*HERO SLIDER*/

.slide-out{background-color: #ffffff;
opacity: .75; /* Standards Compliant Browsers */
filter: alpha(opacity=75); /* IE 7 and Earlier */
    /* Next 2 lines IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
text-align: left;
padding: 10px;
position: absolute;
top: 0px;
height: 300px;
width: 400px;
}
.slide-out a{text-decoration:none;color: #6d6e70;}
.slide-out a:hover{color:#F36F21;}

.slide-header{margin: 0 auto;}
.hover-products{width:338px; margin:20px 0 50px 15px; height: 90px;}
.hover-products img{float: left;}
#hover-prod1{float:right; width: 219px; height: 56px; background: url('http://cookware.lecreuset.com//wcsstore/CVWEB/images/home/hp_hover-prod1-roll_090512.gif') no-repeat; margin-top: 15px;}
a#hover-prod1:hover{background-position: bottom;}