I'm currently working on an HTML/CSS website that incorporates an image magnification effect when hovering over images. Everything seems to be functioning correctly, except for one minor issue in Chrome. Upon page load, the images seem to jitter and resize briefly before settling into their normal size. Interestingly, this problem doesn't occur in other browsers or during testing in Dreamweaver. When I remove the magnification effect, the page loads smoothly as expected. Any thoughts on what could be causing this particular glitch?
Feel free to check out the page here:
Below is the HTML code snippet for the images:
<tr>
<td><a href="" class="imghover"><img src="images/leaf.jpg" alt="portrait" class="border"></a></td>
<td><a href="" class="imghover"><img src="images/DSC_2280-Edit-Edit-Final.jpg" alt="portrait" class="border"></a></td>
<td><a href="" class="imghover"><img src="images/DSC_2685.jpg" alt="blog" class="border"></a></td>
</tr>
And here is the CSS code for the hover effect:
.imghover img{
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
.imghover img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
}