マウスオーバーすると画像が分割されて下層のレイヤーが現れる、という表現をCSSのみで作ってみました。手軽に作れる割にはインパクトが強くてお洒落なので、実用性の面でもオススメです。

まずは完成品

今回紹介するのはこういうエフェクトです。マウスオーバーすると画像が4分割されて上部にスライドし、下のコンテンツが出てきます。

See the Pen Untitled by Leo_8192 (@Leo_8192) on CodePen.

画像の下に色々な情報を入れたりとか、結構面白い使い方が出来そう？

HTML

<div class="split_wrap">
	<div></div><div></div><div></div><div></div>
	<p>斬ッ！！！</p>
</div>

2行目にある気持ち悪い4つのdivタグがポイント。

CSS

.split_wrap{
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position: relative;
	border: 8px solid #fff;
	min-width: 300px;
	min-height: 300px;
	background: #000;
	box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.split_wrap div{
	position: absolute;
	top: 0;
	width: 25%;
	height: 100%;
	background: url(画像URL) no-repeat;
	background-size: 300px;
	transition: 0.5s;
}
.split_wrap div:nth-child(1){
	left: 0;
	transition-delay: 0s;
	background-position-x: 0;
}
.split_wrap div:nth-child(2){
	left: 25%;
	transition-delay: 0.1s;
	background-position-x: calc(100%/3);
}
.split_wrap div:nth-child(3){
	left: 50%;
	transition-delay: 0.2s;
	background-position-x: calc(100%/1.5);
}
.split_wrap div:nth-child(4){
	left: 75%;
	transition-delay: 0.3s;
	background-position-x: 100%;
}
.split_wrap:hover div{
	top: -100%;
}

ちょいと長いコードですが、やってることは単純です。

• 親要素をoverflow:hidden;にしておく
• 親要素の25%の横幅を持った空のdivを4つ並べる
• そのdiv全てに同じ背景画像を指定し、background-positionで位置を調整
• 親要素hover時に、子要素のdivをtop:0;にして上にスライドさせる
• transition-delayで変化開始のタイミングをずらすのを忘れずに

これだけ。ある程度CSSを触っている人ならすぐに理解できると思います。

んじゃ、色々と応用パターンも作ってみましょう。

応用パターン

※一つ一つ解説するのは大変なんで、ソースが気になる人はCodePenに飛んで見てね。

上下スライド

See the Pen Split_image_1 by Leo_8192 (@Leo_8192) on CodePen.

:nth-child(odd)とか使えば楽に作れます。

2枚左右スライド

See the Pen Split_image_3 by Leo_8192 (@Leo_8192) on CodePen.

空divを2枚に減らして、左右にスライドするVerです。

十字切りスライド

See the Pen Split_image_2 by Leo_8192 (@Leo_8192) on CodePen.

ただのゴリ押し。そしてちょっとダサい。

奥行き表現

See the Pen Split_image_3 by Leo_8192 (@Leo_8192) on CodePen.

perspectiveを使いたかっただけのやつ。割と気に入ってる。

---

こんな感じで色々なパターンが作れるんで、興味がある人は色々試してみてください！