前回に引き続きCall to Actionウィジェット。今回はCall to Actionを使い写真にエフェクトをかけます。?
今回も結論先に言っちゃいますがこのデザインを作ります。?
カーソルが重なった時に明るくなったり、ぼかしが消えたり、カラーになったり色々出来ます。
この記事下のDEMOボタンより確認お願いします。
はじめに
左パネルの一般エレメント＞Call to Actionウィジェットを「新しいセクションの追加」へドラッグ＆ドロップ。
設定の方法は前回の記事を参考に今回はCSSフィルタの部分を説明します。
https://elecre.net/2018/02/21/post-1898/
https://elecre.net/2018/02/20/post-1830/
左カラムのウィジェット（上）の設定
カーソルが重なると明るくなる写真です。左パネルのスタイルエリアのHover EffectsからBackgroundのOverlay Colorから色を設定します。
左カラムのウィジェット（下）の設定
カーソルが重なるとぼかしがなくなる写真です。左パネルのスタイルエリアのHover EffectsからBackgroundのCSS FiltersからBlur（ぼかし）を設定します。
右カラムのウィジェットの設定
カーソルが重なるとモノクロ写真からカラー写真に切り替わります。さきほど同様の処理でCSS FiltersからSaturation（彩度）を0に設定します。
あとがき
Photoshopを使わなくても明度や彩度の調整から、ぼかしなど作れるためWeb制作がとても楽になりましたね。??✈️
