matt136 matt136 - 1 month ago 8
HTML Question

jQuery Slide Down - Sliding from Top-Left for Image

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

.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.

Comments