jQuery向下滑动-从左上滑动图像

Question

I have some jQuery for an image overlay which should slide down on hover using the slideDown function. The issue is that it doesn't slide down from the top but grows from the top-left. Please see it here:

http://ts564737-container.zoeysite.com/

My code is below. Could anybody please advise what I am doing wrong with the slideDown function for it to be doing this? Thank you for your help.

HTML & jQuery:

<script>
    jQuery(document).ready(function() {
        jQuery(".imageslide").mouseenter(function() {
            jQuery(".overlayimage").slideDown(200, "linear");
        });
        jQuery(".imageslide").mouseleave(function() {
            jQuery(".overlayimage").slideUp(200, "linear");
        });
    });
</script>

<div class="imageslide">
    <img class="normalimage" style="position: absolute" src="https://s3.amazonaws.com/zcom-media/sites/a0iE000000MFs6GIAT/media/mediamanager/menslookup_1.png">
    <img class="overlayimage" style="position: absolute" src="https://s3.amazonaws.com/zcom-media/sites/a0iE000000MFs6GIAT/media/mediamanager/menslookup_2.png">
</div>

CSS:

/* Image Overlay Slide Down (Start) */
.normalimage {
    cursor: pointer;
}

.overlayimage {
    cursor: pointer;
    display: none;
}
/* Image Overlay Slide Down (End) */

Answer 1

.sideDown() simply animates the height of the object. Since the image has no width, the width is animating with the height in order to maintain aspect ratio. You can resolve the expansion of the image by giving the .overlayimage a width: 100% style. Unfortunately, this will break the aspect ratio of the image and will cause it to stretch so you will need to take a different approach in order to get the effect you are looking for.