Image not open at bigger size on mouse hover

Image not open at bigger size on mouse hover

Hi,
I placed one small image on right bottom of my website. Once user mouse hover the image it opens or expand the image as original size in same place.It should hide the small image and shows the bigger image(original image) on that place.

My code worked for placing small code initially. after hover the image, the bigger image not opened properly. have some issues. 

Kindly help this for solving this issue using javascript or jquery or CSS.

<div class="bcFloat" style="display: block; left: 933.12px; top: 920px; width: 291px; height: 43px; text-align: left; z-index: 3141591; overflow: hidden; position: absolute;">
</div>


<div class="bcFloat1" style="display: block; left: 933.12px; top: 920px; width: 291px; height: 155px; text-align: left; z-index: 3141591; overflow: hidden; position: absolute;">
    <img id="0.2005327107301722" border="0" alt="" src=" http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"/>
</div>

Note : image 1 is the initial image. after hover image 1, image 2 will appear on that place.

<script>
    $(function() {
        console.log( "ready!" );

        $(".bcFloat").on("mouseover", function () {
            $('.bcFloat1').show();
            $('.bcFloat').hide();
        });
        
        $(".bcFloat1").on("mouseover", function () {
            $('.bcFloat').show();
            $('.bcFloat1').hide();
        });
    });
</script>