[CSS練習問題] hoverでクールなマウスオーバーエフェクトを作ろう

今回はPCでマウスオーバー時のエフェクトを簡単に与えることができるhoverを使ってカッコいい動きを作ってみましょう。

インターネットで検索すればカッコいいhoverエフェクトのCSSを公開してくれていたりする方がいて、今では大変なコードをガリガリ書かなくてもカッコいいhoverエフェクトを実装できてしまいます。

しかしそのサイトに合ったデザインを使ったエフェクトを利用したい時などは、ある程度自分で自作やカスタマイズができるレベルになっておかないといけません。

今回は自分で簡単なhoverエフェクトを作成できるようになるためにHTMLとCSSだけを使った初心者向けの練習問題を用意しましたので、例に出されるhoverエフェクトを実際に作りながら理解を深めましょう。

※練習問題で使われている画像は例題のURLから参照してください。

Q1. マウスオーバーしたら枠内の画像が拡大される

下の画像にマウスを乗せてください

まずは画像にhoverすると枠内で画像が拡大される仕組みを作ってみましょう。

作り方の解説

ポイントは画像の周りにoverflow:hiddenを付けた枠(今回の例ではクラス名がframeのspan)をマークアップして、画像が拡大された時に枠からはみ出ないようにすることです。

HTML

<span class="frame">
  <img src="https://web-firstlog.com/wp-content/uploads/2018/01/cropped-top3-mini.jpg" class="q1">
</span>

CSS

.frame{
  display: inline-block;
  width: 300px;
  height: 180px;
  overflow: hidden;
  border: 3px solid #555;
}

.q1{
  transition: all .8s 0s ease;
}

.q1:hover{
  transform: scale(1.2);
}

HTML 1行目

今回の場合、クラス名がframeのspanが枠となってその中に画像が入っているという状況になります。

CSS 2行目

ブロック要素かインラインブロック要素でないとwidthやheightを指定できないので、display:inline-blockでspanをインラインブロック要素に変更しています。ブロック要素でも大丈夫なのですが、今回はインラインブロック要素に変更しました。

CSS 5行目

overflow:hiddenを指定することでその要素から外にはみ出た要素を隠すことができます。枠となっているspanにoverflow:hiddenをしたことで、枠内の画像が拡大されても枠の外からへはみ出ないということになります。

CSS 10行目

transitionをhoverさせる要素へ指定することで、hover時の動きをアニメーションにすることができます。今回の場合、hoverする際に当てるスタイルの全てを0.8秒の時間を掛けて0秒の時間差でeaseという動き方をするという意味になります。

CSS 14行目

そして最後に、画像にhoverしたらその要素が1.2倍の大きさになるtransitionプロパティでhoverしたらどうなるかのスタイルを当てます。

Q1の解説は以上になります。いかがでしたでしょうか?HTMLでマークアップする際に枠のブロックをしっかり作っておけば、CSSは比較的簡単にできたのではないでしょうか?

Q2. 画像をhoverしたらぼんやり説明が表示される

下の画像にマウスを乗せてください

hoverしたら画像の説明が表示されます。

今度は画像をhoverすると画像がぼんやり薄くなり、後ろから画像の説明が出てくるようなエフェクトを実装してみましょう。ギャラリーサイトなどでよく見られるエフェクトですね。

このあたりから色々な作り方がありますので一概に「こう作りなさい」とは言えないです。下の作り方はあくまでも方法の一つとしてお考え下さい。今回は疑似要素(beforeやafter)を使わずに実装しています。

作り方の解説

HTML

<div class="frame2">
	<img src="https://web-firstlog.com/wp-content/uploads/2018/01/sunflower.jpg">
	<div class="q2">
		hoverしたら画像の説明が表示されます。
	</div>
</div>

CSS

.frame2{
	width: 500px;
	height: 334px;
	color: #000;
	transition: all .5s 0s ease;
	position: relative;
}

.frame2 > img{
	position: absolute;
	top: 0;
	left: 0;
	width: 500px;
	height: 334px;
	transition: all .5s 0s ease;
	z-index: 2;
}

.frame2:hover > img{
	opacity: 0.2;
	transform: scale(1.2);
}

.frame2:hover > .q2{
	opacity: 1;
}

.q2{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 500px;
	height: 334px;
	text-align: center;
	line-height: 334px;
	color: #fff;
	background-color: rgba(0,0,0,.8);
	opacity: 0;
	z-index: 1;
	transition: all .5s .3s ease;
}

HTML 2~3行目

positionプロパティを使って画像の下に説明文のdivを重ねているようにマークアップしています。

CSS 6行目

全体の親要素となるframe2のクラスにposition:relativeを付けることで子要素を重ねられるようにしています。

CSS 16行目

img要素を画像説明のdivよりも上に重ならなければいけないので、z-indexを2にしておきます。

CSS 19行目~22行目

frame2のクラスをhoverした時にその直下の子要素へスタイルを与える時は>のセレクタを使ってこのように書きます。

CSS 40行目

画像より説明のdivが後ろに重ならなければいけないのでz-indexを1としています。

Q2の解説は以上になります。少しCSSが長めになってきましたがうまく実装できましたでしょうか?自分で作れるようになれば色々とカスタマイズをしてオリジナルのエフェクトを作ってみると新たな発見があるかもしれません。

Q3. hoverしたら画像が動くエフェクト

最後は今まで使ってきた方法に加え、疑似要素も使って下のようなエフェクトを作ってみましょう。

下の画像にマウスを乗せてください

最初の画像が拡大しながらフェードアウトし、右から新しい画像が出てきています。

このエフェクトを疑似要素を使って実装してみましょう。

作り方の解説

HTML

<div class="frame3">
	<img src="https://web-firstlog.com/wp-content/uploads/2018/01/1-1.png">
</div>

CSS

.frame3{
	width: 300px;
	height: 300px;
	text-align: center;
	border: 1px solid #000;
	overflow: hidden;
	position: relative;
}

.frame3 > img{
	width: 100%;
	transition: all .3s 0s linear;
}

.frame3:hover > img{
	transform: scale(3);
	opacity: 0;
}

.frame3::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('https://web-firstlog.com/wp-content/uploads/2018/01/2-1.png');
	background-size: contain;
	display: block;
	width: 300px;
	height: 300px;
	text-align: center;
	transform: translateX(300px);
	transition: all .3s .3s linear;
}

.frame3:hover::before{
	transform: translateX(0);
}

CSS 6行目

Q1と同じように画像が拡大された時にクラス名がframe3のdivからはみ出ないようにoverflow:hiddenを付けます。

CSS 15行目

クラス名がframe3のdivをホバーすると、その直下のimg要素へスタイルを与えます。

CSS 20行目

横から出てくる二つ目の画像(横向きの聖火ランナー)は疑似要素にしますので、beforeを使って疑似要素を生成します。

CSS 21行目

疑似要素の中身は画像にしたいのですが、contentの中に画像を入れることはできないので一旦空白にしておきます。

CSS 25行目

疑似要素の中身に画像を入れられないので、画像を背景として設定します。

CSS 26行目

背景画像のサイズが要素内に綺麗に収まるように、background-size:containとします。

CSS 27行目

疑似要素はデフォルトではインライン要素となっており、インライン要素ではwidthやheightの指定ができないのでdisplay:blockでブロック要素に変更しておきます。

CSS 31行目

画像をhoverしていない時に疑似要素が表示されないように、transformプロパティで右へ300px移動させておき見えないようにしておきます。

Q3の解説は以上になります。疑似要素を使えるようになれば様々なhoverエフェクトを実装することが可能になりますので、ぜひマスターできるようになりましょう。

まとめ

今回はマウスオーバー時に動きを与えるホバーエフェクトの作り方を解説させていただきましたがいかがでしたでしょうか?

hoverはリンクであることをわかりやすくするための意味以外にも、UI・UXの向上にも利用できることがあります。

オリジナルのカッコいいホバーエフェクトを作って一味違うWEBサイトを作ってみてはいかがでしょうか。

その他のCSS練習問題

[初心者向け練習問題] HTMLとCSSでレイアウトを構成する

3分で出来る選択式練習問題でHTMLとCSSの基礎知識をチェックしてみよう

[CSS練習問題] flexboxでレイアウトを綺麗に整えよう

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です