This option has been available for a while but nobody seems to know much about it or use it. This blog post uses a simple responsive image widget with a custom class to insert CSS to create a scale on hover effect.
NOTE: Always preview you website in Google Chrome, Firefox and the iOS Simulator.
Click the link below to download the widget …
The screenshot shows the widget controls.
The widget can insert two different sizes of images - one for computers and the other smaller one for mobile devices.
The large image file should have a width equal to the maximum width setting and the small one about half that size for best download performance.
The styles for creating the scale on hover are shown below and are pasted into the Head Code box in the Page inspector.
<style>
.hoverScale img{transition:all 350ms ease-in-out;transform:scale(1)}
.hoverScale img:hover{transition:all 700ms ease-in-out;transform:scale(1.22)}
</style>
Note that styles pasted into the Head Code box must be inserted between opening and closing <style></style> tags,
The item has a scale value of 1 on page load and 1.25 on hover. The scale value in the code is marked in red.
Transitions
Hovers without animation make a web page design look dated.
The CSS property which is animated is "all".
The transition time is set in milliseconds.
The transition timimg function is set to "ease-in-out"
The animation IN time is on the hover and the OUT time is on the item itself as can be seen from the code above. For best results set the animation IN time to twice that of the OUT time.
Transform
The scale is set using a CSS transition property set to a value of "scale" with the scale amount in parentheses (round brackets).
The class name in this case is …
hoverScaler … and is pasted into the box in the Shape inspector.
Although the class name in the styles has a period in front of it, the class name in the box does NOT!