Generating the Tilt Photo Hover Effect's shortcode via icon/write yourself in the text editor of blog post or page quickly and easily.
You don’t have to edit all the values – but you can customize the effect by doing so. Experiment with different number of extra images (layers), their opacity, X, Y, Z movement and rotation (try setting Y to 0 and give Y a higher value for horizontal movement only).
You can optionally set width and height (and control the size of image regardless of the original size), you can choose to fit the space provided or to crop it, you can add border (of any thickness), you can have the image in grayscale until you rollover.
Also there are THREE main effects that control the movement. ONE is the most subtle, but artistic. TWO is a bit more aggressive, also very smooth and pretty. THREE is a jumpy effect that will definitely get noticed. By combining different values for rotation, movement, opacity, etc you can generate some beautiful visual effects. Use it on every thumbnail or image on your site, or just on the large header photos for artistic appearance – it’s up to you.
This plugin allows you to embed effective photoes created with Tilt Photo Hover Effect and Online in one step with the shortcode.
Once the plugin is installed, you can copy and paste the your Shortcode or by clicking editor icon and fill popup fields then created shortcode in the body of your page or post. The effects will be added immediately, giving you a colorful, interactive way to engage your audience.
Thank you for purchasing Tilt Photo Hover Effect.
So, what is that I can do with this plug-in?
In short, you can make a visually pleasurable, interactive image effects, white different than with other “hover” effects. This one will tilt images following your mouse movement and create extra ‘onion skin’ layers in a lower opacity to animate.
– Browse for image in seconds, – Choose one of 3 effects to apply, – Adjust movement, rotation, (X,Y and Z), – Add Link URL’s (on click), – Add Border (of any thickness), – Optionally start as grayscale until rolled over, – Resize to ANY size, – Fit inside the space provided or Crop, – Stay inside or move outside the defined area, and more…
How did you think of such plugin? There are many hover effects, but this one is quite unique.
I saw a futuristic poster – hologram demonstrated by a vendor, looking just like the regular wall poster but this one would change and move as you pass by it. I loved the effect and thought about how cool would be to generate something similar as a WP plugin.
Can I use this plugin on all kind of files?
Honestly, you should try to throw as many different formats and files at it and check out. Pretty much if you can load it- it will tilt it. As you can see in our test demo site (http://downloadsoho.com/smooth-image-effect-demo/), it looks beautiful when applied to Cinemagraphs (animated Gifs), single images, sets of thumbnails, or just on a transparent .png that floats on top of a parallax background (as in the header image shown there)
If I add extreme values, will I break the plugin?
I think you should experiment and find even more cool effects with extreme settings. Maybe it can perform some undiscovered magic if pushed to the limits:)
OK, so what about updates and all that?
We will be revisiting the plugin, adjusting it to the new WP versions, browsers, etc. If there are glitches in performances, we will be addressing them. We may even add more options in future. You will be notified every time there is an update available:)
Installation Instructions
Here’s how to make the plugin work for your publications.
1. Download and activate the plugin through the Plugins menu in WordPress admin.
2. Generating the shortcode via button in the page or post text editor.
3. Instead of generating, you can write shortcodes yourself easily by giving below attributes
shortcode: [wpdp_effect]
Attributes:
‘url’ => ‘http://example.com/sample-image/default.jpg’,
‘effect’ => ‘one’,
‘grayscale’ => ‘no’,
‘move_x’ => ‘-15’,
‘move_y’ => ‘-15’,
‘move_z’ => ’20’,
‘rotate_x’ => ’15’,
‘rotate_y’ => ’15’,
‘rotate_z’ => ’10’,
‘opacity’ => ‘0.5’,
‘extra_imgs’ => ‘4’,
‘overflow’ => ‘visible’,
‘width’ => ‘300px’,
‘height’ => ‘300px’,
‘fitscreen’ => ‘no’,
‘link’ => ‘#’,
‘border’ => ‘1px’,
‘target’ => ‘_self’
extra_imgs (Extra Images / Layer) :
Minimum value of extra_imgs is ‘1’ and the maximum number of extra_imgs is ‘5’.
overflow:
‘visible’ : Extra images on mouse hover will be sticking out from the border.
‘hidden’ : Extra images on mouse hover will not b sticking out from the border.
width:
for adjusting the width of the image (e.g “300px”)
height:
for adjusting the height of the image (e.g “300px”)
fitscreen:
for adjusting the whole image in a box. (e.g “yes”)
Have questions or feedback?
Visit our Help Center to learn more.
