HTML・CSSテックラボ

背景画像の拡大・縮小

2017年8月22日

マウスオーバーで背景画像をズームアップする方法を紹介します。

背景画像の拡大・縮小を実現する方法はいくつかありますが、ここではtransformのmatrix3dを使うタイプを紹介します。
※transformのscaleを使うタイプやbackground-sizeを使うタイプがありますが、この2つは background-size: cover と併用して使うとうまくいきません。

demo

HTMLとCSSは次のようになります。

html
<div class="box-main-photo">
<div class="background-image"></div>
</div>

次にCSSです。widthやheightなどは好きなように変更してください。

.box-main-photo {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
.background-image{
position: absolute;
width: 100%;
height: 500px;
background: url("http://rfs.jp/wp-content/themes/smart/i/photo/P6JB59WSR2.jpg") 
#f0f1f6 no-repeat center center;
background-size: cover;
transition: all 0.5s ease-out;
transform: matrix3d(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
);
will-change: transform;
}
.background-image:hover {
transform: matrix3d(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 0.9
);
}

おまけでグレースケールと透過をあわせて使ってみましょう。
HTMLはheader要素を追加しています。

<div class="box-main-photo">
<header class="entry-header">
title
</header>
<div class="background-image"></div>
</div>

CSSは下記を追加します。.entry-headerのdisplay以降は画像の上に文字などを表示させたい際に調整ください。

.entry-header {
position: absolute;
pointer-events: none;
width: 100%;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20pt;
color: #fff;
z-index:1;
}
demo
title

Comment

コメントを残す

メールアドレスが公開されることはありません。

関連記事

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。

株式会社リズムファクトリーでは現在、下記の職種について人材募集を行っております。
求人をクリックすると「求人情報サイトFind Job!」の求人詳細画面が開きますので、こちらからご応募下さい。

提供 : Webな人の求人情報サイト Find Job!