サイト制作を始めて1年半、html、cssが身についてきた今日この頃です。
さまざまな方から伝授してもらい自分なりに作ったcssは可愛いものです。
今回ご紹介するのは、画像をボックス内に収めつつ、マウスホバーでちょっと拡大するCSSテクニックです。制作現場でもよく使う便利な方法なので、ぜひ参考にしてみてください。
↓こんなん
目次
実装例
まずは、基本のHTML構造から
このHTMLに対して、以下の2種類のCSSをご紹介します。
<div class="img_Wrapper">
<img src="imgリンク" alt="画像">
</div>
一部の画像をトリミングしてボックスに収めるCss
画像がボックスのサイズに合わない場合でも、必要な部分だけを表示するテクニックです。
ホバーすると画像が少し拡大して半透明になるので、シンプルながらおしゃれな演出ができます。
/*表示したいボックスサイズ*/
.img_Wrapper {
overflow: hidden; /*拡大した時はみ出た部分を隠す*/
width: 320px; /*boxサイズ*/
height: 320px;
margin: 1rem;
}
/*画像の調整*/
.img_Wrapper img {
width: 100%; /*画像のサイズ*/
height: 100%;
object-fit: cover;/* 画像をクリッピングマスクする*/
transition-duration: 0.3s; /*動く時間(なめらかになる)*/
}
/*ホバー*/
.img_Wrapper img:hover {
transform: scale(1.2); /*拡大*/
transition-duratiosn: 0.3s; /*動く時間(なめらかになる)*/
opacity: 0.5;/*半透明になる*/
}
元の画像比率のままボックスに収めるCss
こちらは、画像の比率を保ちつつ、ボックス内に収めたい場合に使えるテクニックです。
こちらは元の画像比率を保つので、全体を見せたい場合におすすめです。
/* 表示したいボックスサイズ */
.img_Wrapper {
overflow: hidden; /* 拡大した時はみ出た部分を隠す */
width: 320px; /* boxサイズ */
height: 320px;
margin: 1rem;
}
/* 画像の調整 */
.img_Wrapper img {
width: 100%; /* 画像のサイズ */
height: 100%;
object-fit: contain; /* 元の画像サイズに合わせる */
transition-duration: 0.3s; /* 動く時間(なめらかになる) */
}
/* ホバー */
.img_Wrapper img:hover {
transform: scale(1.2); /* 拡大 */
transition-duration: 0.3s; /* 動く時間(なめらかになる) */
opacity: 0.5; /* 半透明になる */
}
どちらを選ぶべき?
使い分けのポイントは「どの部分を見せたいか」によります。
- 強調したい部分を見せたい →
object-fit: cover;
- 画像全体をそのまま見せたい →
object-fit: contain;
まとめ
今回ご紹介したCSSは、見た目のアクセントとして非常に使いやすいテクニックです。
初心者の方でも簡単に取り入れられるので、ぜひ実際の制作に活用してみてください!また、ホバーエフェクトを少しアレンジして、回転や色変更を加えるなど、オリジナルのデザインに発展させるのも楽しいですよ。
最後までお読みいただきありがとうございました!これからもCSSの便利なテクニックをたくさんご紹介していきますので、ぜひお楽しみに!
コメント