TILT PHOTO HOVER EFFECT FOR WORDPRESS
Same (pretty random) settings were applied to all 3 images above. The only difference is in the Effect Type (one, two or three)
SMOOTH IMAGE HOVER EFFECT PLUGIN FOR WORDPRESS will add a very cool effect to any image. You can totally customize everything – from the amount of movement, number of layers, their opacity, border, size, links, border and more.
There are 3 MAIN EFFECTS (1=subtle, 2=more aggressive, 3=jumpy) and they all can contribute to your website’s appearance. You can use it for nice header effects (like in my example), for certain images/photos only, or for all of them (I don’t judge).
You can insert effects by clicking on the TILT HOVER EFFECT BUTTON in the editor, OR you can use a SHORTCODE |wpdp_effect| to apply the effect. Then you’ll add the Image URL, EFFECT, MOVEMENT, ROTATION, BORDER, FITSCREEN, URL (click link) and other things you want customized. You don’t have to use all of them. (Full list of attributes is in the file’s Readme text).
You can get very interesting effects when experimenting with X or Y values of 0, which limits the movement in a cool way (see above)
Use this plugin on animated .gif’s and Cinemagraphs as well. If you can load it as image, this plugin will happily tilt it!
In the example above, BORDER is set to “1”. You can use any number.
“0” is for no border at all.
SHORTCODE OPTIONS FOR CUSTOMIZATION:
effect=’one’ (one, two, three – choose one of 3 effect styles)
grayscale=’no’ (no, yes – initial image can be black/white until you rollover)
move_x=’-15′ (x-scale movement span)
move_y=’-10′( y-scale movement span)
rotate_x=’-7′ (x-scale rotation span)
rotate_y=’-7′ (y-scale rotation span)
opacity=’0.3′ (0.0 to 1 – opacity of “ghost” layers)
extra_imgs=’3′ (1 to 5 – number of “ghost” layers)
width=’540px’ (you can define width here)
height=’400px’ (you can define height here)
overflow=’hidden’ (‘hidden’ or ‘visible’ – if you want image to move outside of the borders on rollover)
fitscreen=’yes’ (no, yes – if you want image to fit the space provided with ‘width’ and ‘height’)
border=’1px’ (0 to ? – adds border to image. Use 0 for no border)
link=’http://scarab13.com’ (if you want clickable images, specify URL here)
CODE USED IN THE EXAMPLE ABOVE: |wpdp_effect url=’http://downloadsoho.com/wp-content/uploads/2015/03/16.jpg’ effect=’two’ grayscale=’no’ move_x=’-21′ move_y=’-11′ rotate_x=’-5′ rotate_y=’5′ opacity=’0.4′ extra_imgs=’4′ width=’1080px’ height=’300px’ overflow=’hidden’ fitscreen=’yes’ border=’0px’ link=’http://scarab13.com’|
FEW EXAMPLES, “GRAYSCALE” = “OFF” (FITSCREEN = YES)
SAME EXAMPLES, “GRAYSCALE” MODE = “ON” (FITSCREEN = YES)
SAME EXAMPLES, “FITSCREEN” = “NO” AND “BORDER” SET TO 1
“EFFECT ONE” is very nice, almost subtle. Also totally customizable, but not too jumpy. You can create nice artsy looks with it. See these 4 examples with EFFECT ONE, with border set to ‘0’ and with grayscale set to ‘ON’
“EFFECT TWO” is a nice one. It’s a bit wilder than ONE but definitely less than THREE. You can get some unique movements with this one…
“EFFECT THREE” is a jumpy one. It looks unique, and it’s highly adjustable. Play with it’s settings for a variety of looks and effects.