CMTA-SubPage -inline-LightBox with zoom hover

by freedawirl

HTML

<!-- LIGHTBOX --><div class="lightBox fares"><div id="lightBoxInner"> <a href="#TransitStores" class="fancybox" caption="Capital Metro Transit Stores &amp; Outlets"><img style="" src="http://stage.capmetro.org/uploadedImages/Capmetroorg/Riders_Guide/Paying_the_Fare/transit-stores-map.jpg" alt="Transit Stores Map - thumbnail" title="Transit Stores Map - thumbnail" /></a>
</div>
<a href="#TransitStores" id="allStores" class="fancybox" title="Transit Stores Outlets" caption="Capital Metro Transit Stores &amp; Outlets">See All Transit Pass Outlets </a>
</div>
<!--END LIGHTBOX -->

CSS

.lightBox.fares {
    margin: 20px;
    float: right;
 text-align:center;  
    width:250px;
    height:170px
}
.lightBox.fares a#allStores.fancybox {
padding: 2px;
display: block;
background: #000000;
color: #fff;
margin-bottom: 0px;
}
.lightBox.fares #lightBoxInner{
    height:249px;
        height:149px;
     overflow:hidden;
}
.lightBox.fares #lightBoxInner img {
    width:100%;
    /* Webkit for Chrome and Safari */
    -webkit-transform: scale(1, 1);
    // This is the scale for the normal size of the image. -webkit-transition-duration: 500ms;
    -webkit-transition-timing-function: ease-out;
    /* Webkit for Mozila Firefox */
    -moz-transform: scale(1, 1);
    -moz-transition-duration: 500ms;
    -moz-transition-timing-function: ease-out;
    /* Webkit for IE( Version: 11, 10 ) */
    -ms-transform: scale(1, 1);
    -ms-transition-duration: 500ms;
    -ms-transition-timing-function: ease-out;
}
.lightBox.fares #lightBoxInner img:hover {
    /* Webkit for Chrome and Safari */
    -webkit-transform: scale(1.2, 1.2);
    // This is the enlarged size scale of the image. -webkit-transition-duration: 500ms;
    -webkit-transition-timing-function: ease-out;
    /* Webkit for Mozila Firefox */
    -moz-transform: scale(1.2, 1.2);
    -moz-transition-duration: 500ms;
    -moz-transition-timing-function: ease-out;
    /* Webkit for IE( Version: 11, 10 ) */
    -ms-transform: scale(1.20, 1.20);
    -ms-transition-duration: 500ms;
    -ms-transition-timing-function: ease-out;
}