オンマウスで画像変形

オンマウスで画像変形

以下の画像編集は、CSSのカスタマイズ結果で実装される画像編集です。
2019年の最新Elementorバージョンでは、CSSカスタマイズ機能を使用せずに、Elementorの「ホバー時のアニメーション」を実行することで、CSSカスタマイズ結果と同様な画像編集が獲得できることになりました。

オンマウスで画像移動

オンマウスすると画像が右下方向に若干移動します。
(CSSクラス名:photo1)

オンマウスで画像拡大

オンマウスすると画像が拡大します。
(CSSクラス名:photo2)

 

オンマウスで画像拡大・その2

前記と同様にオンマウスすると画像が拡大しますが、画像の枠内での拡大となります。
当サイトのトップページで使用している画像表現が、この枠内拡大機能に相当します。
(CSSクラス名:power)

オンマウスで画像反転

オンマウスで画像が反転します。
(CSSクラス名:photo4)

オンマウスで画像傾斜

オンマウスで画像が傾斜します。
(CSSクラス名:photo6)

オンマウスで画像回転

オンマウスで画像が回転します。
(CSSクラス名:photo3)

上記のCSSカスタマイズは、マウスホバーと同意義で、最新のElementorバージョンで使用可能です。