CSSを使ってバナー画像にアニメーションを入れてみた

※当サイトにはプロモーションが含まれています。

通常、バナー画像に、マウスカーソルを上に持っていくと、画像が少し透明になる処理がされることが多いと思います。

/* リンク画像を透過する */
a img:hover {
opacity:0.7;
}

通常、ボタンや画像などは、アニメーション効果を入れた方が、クリック率が高いと言われているので、ちょっと作ってみました。

バナー画像を浮き上がらせるアニメーション

今回、作成したのは、マウスのカーソルを画像の上に持っていくと、画像が少し浮き上がらせて見えるようにしたアニメーションです。

<div class="float-img">
<!-- ここにバナー画像のコードが入る -->
</div>

.float-img img {
transition: all 0.3s ease;
}

.float-img a:hover img {
transform: translateY(-4px);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
opacity: 0.9;
}

transition: all 0.3s easeは、スタイルが変化するときのアニメーションを設定しています。

ここでは、全てのプロパティの変化に対して0.3秒間のease（ゆっくり開始して、ゆっくり終わる）アニメーションを適用しています。

transform: translateY(-4px)は、画像を垂直方向に-4ピクセル（上方向に）動かしています。

box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2)は、画像の周りに薄い影を加えて、浮き上がっているように見せています。

opacity: 0.9は、要素の不透明度を、90%（少し透明）に設定しています。

何となくこっちの方が、クリックされやすいような気がするのですが、どうでしょう？！

補足：ワードプレスの「追加CSS」の編集箇所について

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

「追加CSS」を選択します。

追加したいCSSを記述します（コピペして貼り付けます）。

「公開」ボタンを押して保存すれば完了です。

※全角スペースが入るとレイアウトが崩れる事があります。余計な全角スペースが入らないように気を付けてください。

なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード（ハードリフレッシュ）をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。

強制リロードをすることで、ブラウザがキャッシュを無視し、最新のコンテンツを再読み込みします。