画像縮小（ぼかし）＋テキスト | 動くWebデザインアイディア帳

画像リンクの動き
-画像縮小（ぼかし）＋テキスト-

See the Pen 7-21 画像縮小（ぼかし）＋テキスト by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内の表示を確かめてね！

動きを実現する仕組み

あらかじめ拡大+ぼかした時にはみ出す画像を隠すマスクをつくり、CSSのoverflow:hidden;で隠す。
hoverをしたら0.3秒かけて上下左右に余白をとった背景色が出現。
CSSのscaleとblurを使い、hoverをしたら画像を0.3秒かけて縮小＋ぼかす。
画像の天地中央位置にいるテキストがhoverをしたら0.5秒かけて透過0→出現。

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/7-21.css">
</head>

body内の画像リンクを表示させたい場所に以下のHTMLを記載します。

<div class="zoomOutText"><a href="#"><span class="mask"><img src="img/07.jpg" alt=""><span class="cap">画像縮小（ぼかし）＋テキストが出現 ZoomOutText</span></span></a></div>

自作のCSS内の書き方

/*　画像の縮小＋テキスト出現　*/

.zoomOutText{/*背景色とテキストの基点となる位置を定義*/
	position: relative;
}

.zoomOutText span.mask{
	position: relative;
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
	display: block;/*画像をくくるspanタグをブロック要素にする*/
    line-height: 0;/*行の高さを0にする*/
    overflow:hidden;/*拡大してはみ出る要素を隠す*/
}

.zoomOutText:hover span.mask::before{/*hoverした時の変化*/
	content:"";
	position: absolute;
	z-index:2;
	top:10px;
	left:10px;
	width: calc(100% - 20px);
    height: calc(100% - 20px);
	background:rgba(0,0,0,0.5);/*背景色*/
}

.zoomOutText img{
	transform: scale(1.2);
	filter: blur(0);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomOutText:hover img{/*hoverした時の変化*/
	transform: scale(1);/*縮小の値を変更したい場合はこの数値を変更*/
	filter: blur(2px);/*ぼかし具合を変更したい場合はこの数値を変更*/
}

.zoomOutText span.cap{
	opacity:0;
	transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
	position: absolute;
	z-index:3;/*テキストを前面に出す*/
	top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;/*テキストの色を変えたい場合はここを修正*/
    line-height: 1.5;/*行の高さを1.5にする*/
}

.zoomOutText:hover span.cap{/*hoverした時の変化*/
	opacity:1;
}