jQueryスライドダウン - 画像の左上からスライディング

Question

slideDown機能を使用して、ホバー上をスライドする画像オーバーレイのjQueryがあります。問題は、上から下に滑り落ちるのではなく、左上から大きくなることです。ここでそれを参照してください。

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

私のコードは以下の通りです。誰でも私が間違ってやっていることを助言してもらえますか？slideDownはこれを行うための機能ですか？ご協力ありがとうございました。

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()は、単にオブジェクトの高さをアニメーション化します。画像には幅がないため、アスペクト比を維持するために幅が高さでアニメートされています。 .overlayimageにwidth: 100%のスタイルを指定すると、画像の拡大を解決できます。残念ながら、これは画像のアスペクト比を壊し、伸張させるので、あなたが探している効果を得るには別のアプローチをとる必要があります。