CMTA-SubPage LightBox with zoom hover

by freedawirl

HTML

<!-- LIGHTBOX -->
<div class="lightBox fares"><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 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>
&#160;</div>
</div>
<!--END LIGHTBOX -->

CSS

.lightBox.fares {
    margin: 20px;
    float: right;
    text-align:center;
}
.lightBox.fares a#allStores.fancybox {
    padding: 2px;
    display: block;
    background: #000000;
    color: #fff;
    margin-bottom: 4px;
}
.lightBox.fares #lightBoxInner {
    height:367px;
    width:258px;
    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;
}