【コピペOK】hover時に背景画像だけ拡大する方法【HTML/CSS】

バナーのホバー時にテキストのサイズはそのままで、
背景画像だけを拡大するチュートリアルの紹介です。

この記事の目次

  1. DEMO
  2. HTML/CSS
  3. 補足

DEMO

HTML/CSS

ちょっとCSSが長いですが、まるっとコピペでOKです。

<div class="banner">
<a href="#">DEMO</a>
</div>
.banner {
position: relative;
overflow: hidden;
max-width: 450px;
height: 240px
}
.banner:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
background: url(https://gokansoichiro.com/wp/wp-content/themes/gds/images/blog/google-earth-view-6202.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.banner:hover:after {
opacity: .8;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.banner a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
height: 100%;
text-decoration: none;
color: #fff
}

補足

  1. .bannerのサイズをパーセントにすればレスポンシブにも対応できます。
  2. transition: all .5s ease-out;の数字を変更するとアニメーションの時間を変更できます。
  3. transform: scale(1.1);の数字は拡大比率です。
  4. .banner:hover:afterに設定しているopacity: .8;はホバー時に80%の透過にしているので、いらない場合は消してしまってOKです。

© GOKAN DESIGN STUDIO