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
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>
9. Grayscale
class name “grayscale wclassppe-hover”
Hover the mouse over the image
Code Preview
<div class="grayscale wppe-hover"> <img src="http://yourimagepath.jpg"> <img src="http://yourimagepath.jpg"> </div>
10. Sepia
class name “sepia wppe-hover”
Hover the mouse over the image
Code Preview
<div class="sepia wppe-hover"> <img src="http://yourimagepath.jpg"> <img src="http://yourimagepath.jpg"> </div>
11. Blur + grayscale
class name “blurgrayscale wppe-hover”
Hover the mouse over the image
Code Preview
<div class="blurgrayscale wppe-hover"> <img src="http://yourimagepath.jpg"> <img src="http://yourimagepath.jpg"> </div>
12. Opacity
class name “opacity wppe-hover”
Hover the mouse over the image
Code Preview
<div class="opacity wppe-hover"> <img src="http://yourimagepath.jpg"> <img src="http://yourimagepath.jpg"> </div>
13. Opacity + Color
class name “opacityblue wppe-hover”
Hover the mouse over the image
Code Preview
<div class="opacityblue wppe-hover"> <img src="http://yourimagepath.jpg"> <img src="http://yourimagepath.jpg"> </div>
14. Zoom In
class name “flash wppe-hover”
Hover the mouse over the image
Code Preview
<div class="flash wppe-hover"> <img src="http://yourimagepath.jpg"> <img src="http://yourimagepath.jpg"> </div>
15. Shine
class name “shine wppe-hover”
Hover the mouse over the image
Code Preview
<div class="shine wppe-hover"> <img src="http://yourimagepath.jpg"> <img src="http://yourimagepath.jpg"> </div>