تأثيرات الصور

<div class="wt-box">
    <div class="wt-thum-bx wt-img-effect opacity">
        <img src="images/our-work/pic1.jpg" alt="">
    </div>
</div>

<div class="wt-box">
    <div class="wt-thum-bx wt-img-effect zoom">
        <img src="images/our-work/pic2.jpg" alt="">
    </div>
</div>

<div class="wt-box">
    <div class="wt-thum-bx wt-img-effect shrink">
        <img src="images/our-work/pic3.jpg" alt="">
    </div>
</div>

<div class="wt-box">
    <div class="wt-thum-bx wt-img-effect side-pan">
        <img src="images/our-work/pic4.jpg" alt="">
    </div>
</div>

<div class="wt-box">
    <div class="wt-thum-bx wt-img-effect vertical-pan">
        <img src="images/our-work/pic5.jpg" alt="">
    </div>
</div>

<div class="wt-box">
    <div class="wt-thum-bx wt-img-effect fade-in">
        <img src="images/our-work/pic6.jpg" alt="">
    </div>
</div>

<div class="wt-box">
    <div class="wt-thum-bx wt-img-effect fade-out">
        <img src="images/our-work/pic7.jpg" alt="">
    </div>
</div>

<div class="wt-box">
    <div class="wt-thum-bx wt-img-effect rotate">
        <img src="images/our-work/pic8.jpg" alt="">
    </div>
</div>

<div class="wt-box">
    <div class="wt-thum-bx wt-img-effect blurr">
        <img src="images/our-work/pic1.jpg" alt="">
    </div>
</div>

<div class="wt-box">
    <div class="wt-thum-bx wt-img-effect blurr-invert">
        <img src="images/our-work/pic2.jpg" alt="">
    </div>
</div>

<div class="wt-box">
    <div class="wt-thum-bx wt-img-effect off-color ">
        <img src="images/our-work/pic3.jpg" alt="">
    </div>
</div>

<div class="wt-box">
    <div class="wt-thum-bx wt-img-effect on-color ">
        <img src="images/our-work/pic4.jpg" alt="">
    </div>
</div>

<div class="wt-box ">
    <div class="wt-thum-bx wt-img-effect img-reflection">
        <img src="images/our-work/pic5.jpg" alt="">
    </div>
</div>

<div class="wt-box">
    <div class="wt-thum-bx wt-img-overlay9">
        <img src="images/our-work/pic1.jpg" alt="">
    </div>
</div>

<div class="wt-box">
    <div class="wt-thum-bx wt-img-overlay8">
        <img src="images/our-work/pic8.jpg" alt="">
    </div>
</div>

<div class="wt-box">
    <div class="wt-thum-bx wt-img-overlay7">
        <img src="images/our-work/pic7.jpg" alt="">
    </div>
</div>

<div class="wt-box">
    <div class="wt-thum-bx wt-img-overlay6">
        <img src="images/our-work/pic6.jpg" alt="">
    </div>
</div>

<div class="wt-box">
    <div class="wt-thum-bx wt-img-overlay5">
        <img src="images/our-work/pic5.jpg" alt="">
    </div>
</div>

<div class="wt-box">
    <div class="wt-thum-bx wt-img-overlay4">
        <img src="images/our-work/pic4.jpg" alt="">
    </div>
</div>   

<div class="wt-box">
    <div class="wt-thum-bx wt-img-overlay3">
        <img src="images/our-work/pic3.jpg" alt="">
    </div>
</div>     

<div class="wt-box">
    <div class="wt-thum-bx wt-img-overlay2">
        <img src="images/our-work/pic2.jpg" alt="">
    </div>
</div>

<div class="wt-box">
    <div class="wt-thum-bx wt-img-overlay1">
        <img src="images/our-work/pic1.jpg" alt="">
    </div>
</div>

<div class="mfp-gallery">
    <div class="wt-box">
        <div class="wt-thum-bx wt-img-overlay1 wt-img-effect zoom">
            <img src="images/our-work/pic1.jpg" alt="">
            <div class="overlay-bx">
                <div class="overlay-icon">
                    <a href="javascript:void(0);">
                        <i class="fa fa-external-link wt-icon-box-xs"></i>
                    </a>
                    <a class="mfp-link" href="images/our-work/pic1.jpg">
                        <i class="fa fa-arrows-alt wt-icon-box-xs"></i>
                    </a>
              </div>
            </div>
        </div>
    </div>
</div>

<div class="wt-box">
    <div class="wt-thum-bx wt-img-overlay2 wt-img-effect zoom">
        <img src="images/our-work/pic4.jpg" alt="">
        <div class="wt-info-has p-a20">
          <div class="wt-info-has-text">Explore some of the best business from around the world from our partners and friends.</div>
        </div>
    </div>
</div>                           

<div class="wt-box">
    <div class="wt-thum-bx wt-img-effect zoom">
        <img src="images/our-work/pic2.jpg" alt="">
        <div class="wt-info-has p-a20 site-bg-primary">
            <div class="wt-info-has-text">Explore some of the best business from around the world from our partners and friends.</div>
        </div>
    </div>
</div>                           

<div class="wt-box">
    <div class="wt-thum-bx wt-img-effect zoom">
        <img src="images/our-work/pic5.jpg" alt="">
        <div class="wt-info-has p-a20 bg-green">
            <div class="wt-info-has-text">Explore some of the best business from around the world from our partners and friends.</div>
        </div>
    </div>
</div>