Get the thumbnail image of fotorama framework

I use [fotorama][1] framework to show my images and it works fine. Now I want to show a label when I hover the mouse on a thumbnail image.Below is the html structure

<div class="fotorama fotorama1524085616475" data-navposition="top" id="fotorama-images" data-arrows="always" data-auto="false" data-nav="thumbs" data-transition="crossfade" data-allowfullscreen="native" data-fit="cover" data-keyboard="true" data-swipe="true" data-click="true" data-width="100%" data-ratio="2/3"><div class="fotorama__wrap fotorama__wrap--css3 fotorama__wrap--fade fotorama__wrap--no-controls" style="width: 100%; min-width: 0px; max-width: 100%;">
    <div class="fotorama__nav-wrap">
        <div class="fotorama__nav fotorama__nav--thumbs fotorama__shadows--right" style="width: 502.109px;">
            <div class="fotorama__nav__shaft fotorama__grab" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
                    <div class="fotorama__thumb-border" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px); width: 60px;"></div>
                <div class="fotorama__nav__frame fotorama__nav__frame--thumb fotorama__active" tabindex="0" role="button" style="width: 64px;">
                    <div class="fotorama__thumb fotorama__loaded fotorama__loaded--img">
                        <img src="c8a9bbd396f6249a75ffa8dd527cf067/e85be9def9c9095bc1983e77c5d87ea9/documents/files/0fd47dc8-87e0-45cb-a09d-ea3a2b582451/14-1.png" class="fotorama__img" style="width: 64px; height: 91.3333px; left: 0px; top: -13.6667px;">
                    </div>
                </div>
                <div class="fotorama__nav__frame fotorama__nav__frame--thumb" tabindex="0" role="button" style="width: 64px;">
                    <div class="fotorama__thumb fotorama__loaded fotorama__loaded--img">
                        <img src="c8a9bbd396f6249a75ffa8dd527cf067/e85be9def9c9095bc1983e77c5d87ea9/documents/files/2375de5b-8103-4eec-9a33-3967e7e136fe/3-1.png" class="fotorama__img" style="width: 64px; height: 91.2941px; left: 0px; top: -13.6471px;">
                    </div>
                </div>
                <div class="fotorama__nav__frame fotorama__nav__frame--thumb" tabindex="0" role="button" style="width: 64px;">
                    <div class="fotorama__thumb fotorama__loaded fotorama__loaded--img">
                        <img src="c8a9bbd396f6249a75ffa8dd527cf067/e85be9def9c9095bc1983e77c5d87ea9/documents/files/3844b2bc-81c2-474b-aa98-2041b18d6fdc/8-1.png" class="fotorama__img" style="width: 64px; height: 90.3666px; left: 0px; top: -13.1833px;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

This is what I have tried so far.

<script>
$(document).ready(function(){
   $('#fotorama-images div.fotorama__thumb.fotorama__loaded.fotorama__loaded--img').find('img').attr('src').hover(function ()
    {
        $("#mylable").css('visibility','visible');
    },function ()
    {
        $("#mylable").css('visibility','hidden');
    });
});
</script>

it doesn't show the span lable. How can I access the image?

[edited] added div structure

I found the solution for this question.

$(document).on('mouseover', '.fotorama__nav__frame', function () {

$("#mylabel").css('visibility','visible');


});

$(document).on('mouseleave', '.fotorama__nav__frame', function () {
    $("#mylabel").css('visibility','hidden');

});