Images effects

Images effect on hover

Opacity low

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

Zoom

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

Shrink

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

Left move

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

Vertical move

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

Fade-in

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

Fade out

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

Image rotate

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

Blur

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

Blur invert

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

Off color hover

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

On color hover

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

Reflection

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

Images overlay on hover

Effect 9

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

Effect 7

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

Effect 7

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

Effect 6

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

Effect 5

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

Effect 4

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

Effect 3

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

Effect 2

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

Effect 1

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

Images overlay & content on hover

Effect 1

<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>
Explore some of the best business from around the world from our partners and friends.

Effect 2

<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>                           
Explore some of the best business from around the world from our partners and friends.

Effect 2

<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>                           
Explore some of the best business from around the world from our partners and friends.

Effect 2

<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>                              
Explore some of the best business from around the world from our partners and friends.

Effect 2

<div class="wt-box">
    <div class="wt-thum-bx wt-img-effect zoom">
        <img src="images/our-work/pic7.jpg" alt="">
        <div class="wt-info-has p-a20 bg-black">
            <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>                             
Explore some of the best business from around the world from our partners and friends.

Effect 2

<div class="wt-box">
    <div class="wt-thum-bx wt-img-effect zoom">
      <img src="images/our-work/pic8.jpg" alt="">
      <div class="wt-info-has p-a20 bg-white no-hover">
          <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>
L
A D I N G
Color Skin
Background Image
Background Pattern
Layout
Nav
Nav
Header