WK TARGET NICHE FINAL

by Tiffany Carpenter

HTML

<div id="parent">
    
<div id="frame1">
    <div class="image">
        <img src="https://dl.dropboxusercontent.com/u/236154657/Niche-Circles1C2.png" /></div>
    <div class="overlay1"><img src="https://dl.dropboxusercontent.com/u/236154657/Mouseover-Background1d.png"/></div>
</div>
   
<div id="frame2">
    <div class="image">
        <img src="https://dl.dropboxusercontent.com/u/236154657/Niche-Circles2C2.png" /> </div>  
        <div class="overlay2"><img src="https://dl.dropboxusercontent.com/u/236154657/Mouseover-Background2d.png" /></div>
</div>

<div id="frame3">
    <div class="image">
        <img src="https://dl.dropboxusercontent.com/u/236154657/Niche-Circles3C2.png" /></div>
        <div class="overlay3"><img src="https://dl.dropboxusercontent.com/u/236154657/Mouseover-Background3d.png" /></div>    
</div>     
        
</div>

CSS

#parent {
    position:relative;
    display:inline;
    float:left;
    z-index: 5;
    border-style:solid;
    border-width:1px;
     width:1400px;
    height:250px;
}

.image {
    position:relative;
    z-index: 10; 
    display:inline;
    float:left;
    margin-right:187px;
    height: 250px;
    width: 250px
    transition:opacity 0.5s ;
    -webkit-transition:opacity 0.5s ease-out 1s;
    -moz-transition:opacity 0.5s ease-out 1s;
    -o-transition:opacity 0.5s ease-out 1s;
    -ms-transition:opacity 0.5s ease-out 1s;
}

.overlay1 {
    opacity:0;
    position:absolute;
    z-index: 4; 
    width:1109px;
    height:250px;
    background:rgba(0, 0, 0, 0);
    top:0;
    left:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    text-align:center;
    color:white;
    padding:0px;
    font-size:20px;
     transition:opacity 1s ;
    -webkit-transition:opacity 1s;
    -moz-transition:opacity 1s;
    -o-transition:opacity 1s;
    -ms-transition:opacity 1s;
}

#frame1:hover .overlay1 {
    opacity:1;
    z-index: 9; 
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    transition:opacity 1s ;
    -webkit-transition:opacity 1s;
    -moz-transition:opacity 1s;
    -o-transition:opacity 1s;
    -ms-transition:opacity 1s; 
   } 

.overlay2 {
    opacity:0;
    position:absolute;
    z-index: 4;
    width:1109px;
    height:250px;
    background:rgba(0, 0, 0, 0);
    top:0;
    left:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    text-align:center;
    color:white;
    padding:0px;
    font-size:20px;
    transition:opacity 1s ;
    -webkit-transition:opacity 1s;
    -moz-transition:opacity 1s;
    -o-transition:opacity 1s;
    -ms-transition:opacity 1s;
}

#frame2:hover .overlay2 {

    opacity:1;
    z-index: 9; 
    -moz-transform:...