نمایش آیکن ذره بین روی تصویر با رفتن ماوس روی آن

قطعه کد مورد نظر CSS

/* jquery-method */

span.roll {
    background: url(../img/mag.png) center center no-repeat #000;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 10;
    -webkit-box-shadow: 0px 0px 4px #000;
    -moz-box-shadow: 0px 0px 4px #000;
    box-shadow: 0px 0px 4px #000;
    padding-right: 15px;
    right: 0px;
    left: 0px;
}

قطعه کد JS مورد نظر

<script>
    $(function() {
// OPACITY OF BUTTON SET TO 0%
        $(".roll").css("opacity","0");

// ON MOUSE OVER
        $(".roll").hover(function () {

// SET OPACITY TO 70%
                $(this).stop().animate({
                    opacity: .7
                }, "slow");
            },

// ON MOUSE OUT
            function () {

// SET OPACITY BACK TO 50%
                $(this).stop().animate({
                    opacity: 0
                }, "slow");
            });
    });
</script>

قطعه کد HTML مورد نظر

<a class="image" href="./product/kgaKFrf9nlT5VG.png"
   data-lightbox="example-set" data-title="">
    <span class="roll"></span>
    <img src="./uploaded/product/kgaKFrf9nlT5VG.png" title="" alt=""/>
</a>

نکته:‌ پیش از این ها حتما بایستی کتابخانه Jquery.js - Lightbox.js - Lightbox.css را فراخوانی کرده باشیم.

همچنین فایل تصویر ذره بین از قسمت زیر قابل دریافت است:

/uploader/files/mag.png