画像リンクの動き
-画像拡大(ぼかし)+テキスト-
See the Pen 7-20 画像拡大(ぼかし)+テキスト 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-20.css"> </head>
- body内の画像リンクを表示させたい場所に以下のHTMLを記載します。
<div class="zoomInText"><a href="#"><span class="mask"><img src="img/06.jpg" alt=""><span class="cap">画像拡大(ぼかし)+テキストが出現 ZoomInText</span></span></a></div>
自作のCSS内の書き方
/* 画像の拡大+テキスト出現 */
.zoomInText{/*テキストの基点となる位置を定義*/
position: relative;
}
.zoomInText span.mask{
position: relative;
transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
display: block;/*画像をくくるspanタグをブロック要素にする*/
line-height: 0;/*行の高さを0にする*/
overflow:hidden;/*拡大してはみ出る要素を隠す*/
}
.zoomInText: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);/*背景色*/
}
.zoomInText img{
transform: scale(1);
filter: blur(0);
transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
.zoomInText:hover img{/*hoverした時の変化*/
transform: scale(1.2);/*拡大の値を変更したい場合はこの数値を変更*/
filter: blur(2px);/*ぼかし具合を変更したい場合はこの数値を変更*/
}
.zoomInText 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にする*/
}
.zoomInText:hover span.cap{/*hoverした時の変化*/
opacity:1;
}
バリエーション
を見る
「印象」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!