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>

Flip container

<div class="flip-container">
    <div class="wt-box">
        <div class="wt-thum-bx">
            <img src="images/our-work/pic6.jpg" alt="">	
        </div>
        <div class="wt-info bg-gray text-center p-a20">
            <h3 class="text-uppercase">Flip container</h3>
            <p>Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.</p>
         </div>
    </div>
</div>

Flip container

Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.

Flip container

Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.

Flip container 2

<div class="flip-container vertical">
    <div class="wt-box">
        <div class="wt-thum-bx">
            <img src="images/our-work/pic7.jpg" alt="">	
        </div>
        <div class="wt-info bg-gray text-center p-a20">
            <h3 class="text-uppercase">Flip container</h3>
            <p>Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.</p>
         </div>
    </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>

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.
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>                           

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.
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>                             

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>
Explore some of the best business from around the world from our partners and friends.
Color Skin
Nav
Nav
Header
Layout
Background Image
Background Pattern