CSS(SCSS) ホバーで背景画像拡大とカラーフィルターをかける
完成イメージ
今回作成するものは以下です。
使うものはCSS(SCSS)だけです。
・画像にテキストを重ねる
・ホバーすると画像が拡大する（テキストは拡大しない）
・ホバーに合わせて黒のカラーフィルターをかける
・画像全体がリンクとしてクリックできる
・画像にはbackgraoun-imageを使い画像サイズにレイアウトが影響されない
・各要素はflexboxなどで自由に配置ができる
・ホバーの動きはコンポーネント化してクラス名付与で使い回せる
個別に考えると要素の重なりで
リンクが上手く動作しなかったり
htmlがネストだらけになりそうですが
疑似要素のafterを使うことで全ての条件を満たします。
完成コード
<sectionclass="banners"><aclass="banner bg-zoom"href="#"><divclass="banner-content bg-zoom-content"><p>text</p></div></a><aclass="banner bg-zoom"href="#"><divclass="banner-content bg-zoom-content"><p>text</p></div></a><aclass="banner bg-zoom"href="#"><divclass="banner-content bg-zoom-content"><p>text</p></div></a></section>aタグで囲まれた部分が１つの要素です。
.banners{display:flex;//要素を横並び}.banners.banner{width:100%;//要素の横幅（レスポンシブ想定で％指定）height:300px;//要素の高さ}.banners.banner.banner-content{color:white; //テキスト色は白}.bg-zoom{position:relative;//親要素を決めるoverflow:hidden;//背景拡大時のはみ出しを非表示background:#000;//カラーフィルターは黒}.bg-zoom:after{position:absolute;//子要素を固定content:"";//疑似要素の中身は空（必須）display:block;//フィルターの高さと幅を指定のためブロック要素に変更width:100%;//カラーフィルター幅は画像いっぱいにheight:100%; //カラーフィルター高さは画像いっぱいにtop:0; //カラーフィルターをトップに固定background:url(https://picsum.photos/id/237/200/300)no-repeatcentercenter;//画像のパスを指定transition:all.8sease;//変化のスピードと動きbackground-size:cover;//背景画像のプロパティはカバー}.bg-zoom:hover:after{opacity:.3;//ホバー時に透過させてフィルターがかかるtransform:scale(1.05);//画像の拡大比率（１０５％）}.bg-zoom.bg-zoom-content{z-index:1;//テキストを最上面に指定position:absolute;//親要素に固定top:50%;//中央揃えleft:50%; //中央揃えtransform:translate(-50%,-50%); //中央揃え}実行結果
bg-zoomというクラスにホバーアニメーションを固定することで
他の箇所にもクラス指定するだけで同じアニメーションをかけることができます。
mixinを使用して画像を切り替え
上記では全ての画像が同じになってしまうため
コンポーネント化したbg-zoomをmixinを使用して
引数で画像のパスがわたせるようにします。
<sectionclass="banners"><aclass="banner con1"href="#"><divclass="banner-content bg-zoom-content"><p>text</p></div></a><aclass="banner con2"href="#"><divclass="banner-content bg-zoom-content"><p>text</p></div></a><aclass="banner con3"href="#"><divclass="banner-content bg-zoom-content"><p>text</p></div></a></section>.banners{display:flex;//要素を横並び}.banners.banner{width:100%;//要素の横幅（レスポンシブ想定で％指定）height:300px;//要素の高さ}.banners.banner.banner-content{color:white; //テキスト色は白}@mixinbgZoom($bgPath){position:relative;overflow:hidden;background:#000;&:after{position:absolute;content:"";display:block;width:100%;height:100%;top:0;background:$bgPathno-repeatcentercenter;transition:all.8sease;background-size:cover;}&:hover:after{opacity:.3;transform:scale(1.05);}.bg-zoom-content{z-index:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}}.con1{@includebgZoom(url(https://picsum.photos/seed/picsum/1350/900))}.con2{@includebgZoom(url(https://picsum.photos/id/237/1350/900))}.con3{@includebgZoom(url(https://picsum.photos/1350/900?grayscale))}コンパイルした実行結果
