WP Photo Effects

WP Photo Effects gives nice looking effect on your photos. you can apply custom effect on any photo. just use the shortcode and this will change your simple static photo to nice moving effects. you can customize the photo effects by using shortcode attributes and there are many built-in effects just use the proper class names with HTML structure to directly apply the effect on your photos.

1. Thumbnail Hover Effect

Code Preview

<div class="wppe-wrapper">
<div class="wppe-gallery">
<ul>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/9.png"></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/2.png"></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/3.png"></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/1.png"></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/4.png"></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/5.png"></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/7.png"></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/8.png"></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/6.png"></li>
</ul>
</div>
</div>

2. Gradient Hover Effect

Code Preview

<div class="wppe-gradient-effect">
<div class="wppe-gradient-effect__img"></div>
<h2 class="wppe-gradient-effect__title">Gradient Hover Effect</h2>
</div>

3. IMAGE WITH CAPTION ANIMATION

Code Preview

<div class="wppe-hover-caption">
<figure class="wppe">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample20.jpg" alt="sample20"><figcaption>
<div class="left">
<h3>hello</h3>
</div>
<div class="right">
<h3 class="white">world</h3>
</div>
</figcaption><div class="center"><i class="ion-ios-loop-strong"></i></div>
<p><a href="#"></a></p></figure>
<figure class="wppe hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample21.jpg" alt="sample21"><figcaption>
<div class="left">
<h3 class="red">Buy</h3>
</div>
<div class="right">
<h3 class="white">Now</h3>
</div>
</figcaption><div class="center"><i class="ion-ios-loop-strong"></i></div>
<p><a href="#"></a></p></figure>
<figure class="wppe"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample22.jpg" alt="sample22"><figcaption>
<div class="left">
<h3 class="yellow">LIfe less</h3>
</div>
<div class="right">
<h3 class="white">Ordinary</h3>
</div>
</figcaption><div class="center"><i class="ion-ios-loop-strong"></i></div>
<p><a href="#"></a></p></figure>
</div>

4. Zoom In

Hover your mouse on the image

Code Preview

<div class="zoomin wppe-hover">
<img src="http://yourimagepath.jpg">
<img src="http://yourimagepath.jpg">
</div>

5. Zoom Out

Code Preview

<div class="zoomout wppe-hover">
<img src="http://yourimagepath.jpg">
<img src="http://yourimagepath.jpg">
</div>

6. Slide

class name “slide wppe-hover”

Hover the mouse over the image

Code Preview

<div class="slide wppe-hover">
<img src="http://yourimagepath.jpg">
<img src="http://yourimagepath.jpg">
</div>

7. Rotate Zoomout

class name “rotatezoomout wppe-hover”

Hover the mouse over the image

Code Preview

<div class="rotatezoomout wppe-hover">
<img src="http://yourimagepath.jpg">
<img src="http://yourimagepath.jpg">
</div>

8. Blur

class name “blur wppe-hover”

Hover the mouse over the image

Code Preview

<div class="blur wppe-hover">
<img src="http://yourimagepath.jpg">
<img src="http://yourimagepath.jpg">
</div>