Tweet

Pocket

画像にマウスカーソルをのせた時に、
画像がにゅるっと拡大して、キャプションがふわっと出てくる動きです。

デモサイト

最近、こういうの多い気がします。

全部CSSだけでできるのでお手軽です。

html

画像一つ分だけ抜き出してます。

<a href="#" class="thumnail">
<figure>
	<img src="images/IMG1.jpg" height="200" width="300" alt="製作中">
	<figcaption>sample<br>キャプション表示</figcaption>
</figure>
</a>

仕組みとしては、画像とキャプションをタグで囲う。

そして、囲ったタグを基準にpositionでキャプションを画像に重ね、
最初はopacity:0で見えないようにしておく

マウスオーバーでopacity:1にし表示状態にするというようになっています。

css

今回の記述すべて抜き出すとこんな感じです。

html {
	font-size: 62.5%;
}
a.thumnail {
	display: block;
	float: left;
	overflow: hidden;
	width: 25%;
}
img {
	height: auto;
    -webkit-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
	width: 100%;
	vertical-align: bottom;
}
figure {
	margin: 0;
	overflow: hidden;
	position: relative;
	text-align: center;
}
figcaption {
    background-color: rgba(0,0,0,0.6);
	color: #FFF;
	opacity: 0;
	font-size: 16px;
	font-size: 1.6rem;
	position: absolute;
	text-align: center;
	-webkit-transition:all 0.25s ease-in-out;
        transition:all 0.25s ease-in-out;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
    padding-top: 25%;
}
a:hover>figure img {
        transform: scale(1.15,1.15);
        -webkit-transform:scale(1.15,1.15);
        -moz-transform:scale(1.15,1.15);
        -ms-transform:scale(1.15,1.15);
        -o-transform:scale(1.15,1.15);
}
a:hover>figure figcaption {
	opacity: 1;
}

figureにposition:relativeを指定し基準にしています。

figure {
	margin: 0;
	overflow: hidden;
	position: relative;
	text-align: center;
}

その直下のfigcaptionにposition:absoluteで、
画像の上に全面表示されるように調整しています。

figcaption {
        //省略
	position: absolute;
	text-align: center;
	top: 40%;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

top,left,right,bottomの指定の仕方は、
中央寄せするテクニックです。

先ほども書いたようにhoverでopacityを1にし表示させます。

a:hover>figure figcaption {
	opacity: 1;
}

画像の拡大は、transform:scaleを使っています。

a:hover>figure img {
        transform: scale(1.15,1.15);
        -webkit-transform:scale(1.15,1.15);
        -moz-transform:scale(1.15,1.15);
        -ms-transform:scale(1.15,1.15);
        -o-transform:scale(1.15,1.15);
}

imgタグに指定しているtransitionですが、
0.25sとなっているところでスピードを調整できます。

ここをいじってみても面白いと思います。
6sぐらいに遅くするとまた印象が違います。

img {
	height: auto;
    -webkit-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
	width: 100%;
	vertical-align: bottom;
}

とりあえず、コピペで動くことは動くと思うので、
あとはCSS微調整で試してみてください。

Tweet

Pocket