Product Slider BlockFree downloadMenu3D tilt hover effect for WooCommerce product cards
The card leans to the pointer, as if pressed there with a finger. It is a small move, and the whole picture takes part. Keep it on cards with some margin around them, because a leaning card needs room to lean into, and a tight grid makes neighbours touch.
Two half moons
€58
Point at the picture. On a touch screen, press and drag.
It works everywhere you show flat things with some value, like prints, covers and cards, and it costs nothing in clarity. Use a small angle, as you should feel it before you see it.
What the sliders do
- Strength
- How far the card leans at its edge. At 50 it is 8 degrees. Past 75 it starts to look like a toy.
Where we started
The values we started this page on: Size 50, Strength 40.
Questions
Why is there no Size here?
Tilt turns the whole slide, so it has no area to set. Only Strength does anything.
Does the text tilt too?
No. The slide's text is HTML, and it stays flat. Only the picture is drawn on the canvas.
More on it
Mouse effects come with Pro. Pro starts at $19 a year. The free plugin has hover morph and the storewide switches.
Get the free plugin