javascript - Jquery 基本ギャラリー アニメーション

Question

サムネイルをクリックすると、以下の機能を使用して大きな画像を表示する基本的な「ギャラリー」を作成しました。サムネイルを大きな画像に遷移させるアニメーションを作りたいです。たとえば、サムネイルは大きな画像の場所にスライドして、その場所またはそれらの線に沿って広がる可能性があります。

function Kuvansuurennus(pic)
    {
        document.getElementById("peukalokuva").style.visibility="visible"
        document.getElementById("peukalokuva").src=pic
    }

私が使用するいくつかのスタイル定義

.thumb
    {

        height:150px;
        width:200px;
    }
    #peukalokuva
    {
        float:right;
        margin-right:4%;

        width:70%;
        visibility:hidden;
    } 

そして、私が使用する画像と、より大きな画像のターゲット画像

<img id="peukalokuva">
    <div>
    <img class="thumb" src="kuva1.jpg" onclick="Kuvansuurennus(this.src)"/>
    <br>
    <img class="thumb" src="kuva2.jpg" onclick="Kuvansuurennus(this.src)"/>
    <br>
    <img class="thumb" src="kuva3.jpg" onclick="Kuvansuurennus(this.src)"/>
    <br>
    <img class="thumb" src="kuva4.jpg" onclick="Kuvansuurennus(this.src)"/>
    <br>
    <img class="thumb" src="kuva5.jpg" onclick="Kuvansuurennus(this.src)"/>
    <br>
    <img class="thumb" src="kuva6.jpg" onclick="Kuvansuurennus(this.src)"/>
    </div>

それがコードなので、サムネイルから大きな画像へのアニメーション化されたトランジションを取得するには、関数をどのように変更すればよいですか?