この記事では私のブログで使用している画像や画像リンクにマウスのカーソルを乗せたときに、下に沈む（凹む）ようなアニメーションをつけるCSSをご紹介します。
この効果をつけたくて検索していたらテキストリンクやボタンリンク向けのCSSはたくさん見つかったのですが、画像向けのカスタマイズは見つからなかったので記録しておこうと思います。
あくまでCSS素人の記録なので、ご了承ください～！
また使用する際は事前にWordpressのバックアップを取るなど、自己責任でお願いいたします。
では画像をぺこっと凹むようにしたい方は参考にしてみてください(*^^*)
画像を沈ませるためのカスタマイズコード
まずこのカスタマイズは、サイト内のすべての画像に一括で沈む効果を出すカスタマイズではありません。
以下のCSSを追加し、このカスタマイズ専用のHTMLタグで、沈ませたい画像のHTMLタグ囲むことで効果が出るようになっていますよ(*’ω’*)
また、私は画像を中央寄せにしたときにこの効果を出したかったので、以下のCSSを使うと画像は常に中央寄せになります。
ではさっそくですがマウスオーバーで画像を沈ませるCSSとHTMLのコードはこちらです！
CSS
.img-wrap {
text-align: center;
margin: 40px 0;
}
/* 基本のアニメーション */
.img-wrap img {
max-width: 100%; /* 親幅を超えない（スマホ対応） */
height: auto; /* アスペクト比維持 */
transition: transform 0.25s ease;
display: inline-block;
}
/* ホバーで沈む効果 */
.img-wrap img:hover {
transform: translateY(5px);
}
上記のCSSを
- 外観→カスタマイズ→追加CSS
- 外観→テーマファイルエディター→ 子テーマのstyle.css
のどちらかに貼り付けてください。
レスポンシブになっているので、スマホから見ても画像サイズが画面の横幅に収まります(´▽｀)
HTML
＜div class=”img-wrap”＞
＜img src=”sample.jpg” alt=”sample image”＞
＜/div＞
※上記HTMLは全角の＜＞になっているので、半角の<>に変えて使用してくださいね♪
赤文字部分が画像のタグになります。
1行目と3行目のタグで画像を囲んでくださいね～！
サンプル
このCSSを追加し、画像をHTMLタグで囲むと以下のような効果が出せます。
↑画像にカーソルを乗せると、ふわっと沈むようになっていると思います！
カスタマイズの補足説明
より自分の好みに近いカスタマイズにするための補足説明です。
画像を下に沈ませる大きさを変えたい場合
ホバー時に沈むように見せる効果の「transform: translateY(5px);」は下に5ピクセル移動して沈むという意味です。
なので、数字を大きくするとより大きく沈みますよ。
私的には5pxくらいがちょうどよかったです(*^^*)
画像自体の大きさを変えたい場合
画像の大きさはCSSでは指定していないので、画像のHTMLタグでその都度好きな大きさに変えたり、元の画像ファイル自体のサイズなどにできます。
元のファイルサイズに関わらず画像サイズを指定したい場合は、画像のHTMLタグの
＜img src=”sample1.jpg” width=”300″(横幅) height=”100″(縦幅)＞
この部分の数字を変えることで、画像自体のサイズを変えることが可能です♪
画像を並べる際に「高さを揃えたい！」というときに使えます。
画像を縦に並べたときに隙間が空く場合
画像同士の隙間が空きすぎる原因はCSSのこの部分です。
なので、画像を縦に並べるとそのmarginが積み重なって大きなスキマに見えるんですね。
ということで、上下を詰めたい場合はmarginの数字を小さくするorなくすだけでOK！
画像を中央寄せにしたくない場合
画像を中央寄せにしたくないときは、以下のCSSを使用してくださいね。
.img-wrap {
margin: 0;
padding: 0;
line-height: 0;
}
.img-wrap img {
display: block; /* 余白防止＋左寄せ */
max-width: 100%;
height: auto;
transition: transform 0.25s ease;
}
.img-wrap img:hover {
transform: translateY(5px);
}
このCSSを使うと常に中央寄せしない＝画像本来の配置（左寄せ）になります。
画像を沈ませるためのCSSカスタマイズまとめ
この記事では私のブログで使用している画像や画像リンクにマウスのカーソルを乗せたときに、下に沈む（凹む）ようなアニメーションをつけるCSSをご紹介しました。
CSSを追加して、HTMLタグで画像を囲むだけで使えるので簡単です♪
画像が沈むアニメーションとてもかわいいので、ご参考までにどうぞ～(*´ω｀*)
コメント