CSSによるオンマウスでの画像変形の違い

上記の２つのサイトは、CSSによる画像変形、特にオンマウスで様々に変形する画像を、HAIKの場合とWordPressの場合で検証したページです。即ち、左がHAIKで作成された検証結果ページで、右はWordPressの結果ページです。

何れの場合も表面的には大差ありませんが、作る側の難易度からみると、Elementorが絡むとWordPressの方が若干難しいかも知れません。普段、Elementorは易しいと言っていた筆者の主張と矛盾する発言ですが、実は、CSSが絡むとElementorでの画面編集に難しい一面が表面化されます。これも多分に慣れの問題でしょうが・・・・

CSSの適用手順に差があります。

[check]HAIKの場合
画像変形させたいページのトップで ＃beforescript 文でCSSを定義し、実際に画像を表示する箇所で、以下のようなおまじないを設定します。

WordPressの場合

先ず、プラグイン「Simple Custom CSS」で画像変形のCSS文を事前登録します。
次に、画像表示のソースコードを、以下のHTMLタグで挟むという仕様になります。