I recently implemented a zoom on hover feature using code that works perfectly in my Brackets Live Preview environment. However, when I upload the page to my website, the functionality seems to have disappeared. I believe I have included all the necessary code snippets to help identify and solve this issue. Despite the image not enlarging upon hovering as expected, it continues to work flawlessly in Live Preview. Any suggestions or feedback on resolving this problem would be greatly appreciated.
#gallery {
width: 300px;
height: 3600px;
float: left;
padding-top: 0px;
padding-bottom: 20px;
}
#gallery p:nth-child(2n+4) {
padding-bottom: 10px;
margin-bottom: 30px;
font-family: "jaf-bernina-sans-narrow";
font-size: .9em;
border-bottom: 1px solid black;
}
#centerHover {
font-family: "jaf-bernina-sans-narrow";
font-size: .9em;
line-height: 14px;
padding: 0 1em 0;
margin-top: 10px;
text-align: justify;
}
h1 {
font-size: 1.2em;
font-variant: small-caps;
text-align: center;
padding-top: 9px;
padding-bottom: 11px;
border-top: 2px solid #FAA91D !important;
border-bottom: 2px solid #FAA91D !important;
}
.img-zoom {
width: 310px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
}
.transition {
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-o-transform: scale(2.5);
transform: scale(2.5);
}
<div id="gallery">
<h1>Image Gallery</h1>
<p id="centerHover">Center image vertically on page and hover to enlarge.</p>
<p><img class="img-zoom" src="http://bartonlewis.com/_images/pg_p_lewis_alex_17981019_ky_christian_war_1197.jpg" class="img-thumbnail" alt="lewis land warrant" width="259" height="387"></p>
<p>Alexander Lewis's warrant to survey 200 acres of "second rate land" on the west fork of Pond River. Robert Mosby (among others) was a witness.</p>
<p><img class="img-zoom" src="http://bartonlewis.com/_images/pg_p_lewis_alex_17900212_ky_christian_sur_1197.jpg" class="img-thumbnail" alt="lewis land survey" width="259" height="387"></p>
<p>Alexander Lewis's survey dated 12 Feb 1799 for the above warrant.</p>
<p><img class="img-zoom" src="http://bartonlewis.com/_images/pg_p_lewis_alex_18050501_ky_christian_trn_1197.jpg" class="img-thumbnail" alt="lewis land transfer" width="259" height="387"></p>
<p>Alexander Lewis transferred his 200 acre survey to Benjamin P Campbell on 1 May 1805. Alexander's son Robert was a witness. Campbell transferred it to Smith Lofland on 13 Nov 1806.</p>
</div>
<script src="jquery.js"></script>
<script>
//THIS IS THE JS FROM THE DEMO
$(document).ready(function(){
$('.img-zoom').hover(function() {
$(this).addClass('transition');
}, function() {
$(this).removeClass('transition');
});
});
//THIS IS THE END OF THE JS FROM THE DEMO
</script>