CSSだけで作る、マウスオーバーで背景が拡大するボタン【 レスポンシブ対応・アスペクト比維持】

こちらの記事は、以前紹介したマウスオーバー時に背景が拡大するボタンのレスポンシブに対応した作り方の紹介です。
要素のアスペクト比を保ったままレスポンシブに対応させるには要素の高さをpadding-topを使って設定します。

DEMO

以前のサイズを固定したやり方はこちら

【コピペOK】hover時に背景画像だけ拡大する方法【HTML/CSS】
【コピペOK】hover時に背景画像だけ拡大する方法【HTML/CSS】
バナー等で使える、ホバー時にテキストのサイズはそのままで、背景画像だけを拡大するCSSアニメーションの紹介です。

この記事の目次

  1. HTML
  2. CSS

HTML

<div class="container">
  <div class="banner">
    <div class="inner">
      <a href="#">DEMO</a>
    </div>
  </div>
  <div class="banner">
    <div class="inner">
      <a href="#">DEMO</a>
    </div>
  </div>
  <div class="banner">
    <div class="inner">
      <a href="#">DEMO</a>
    </div>
  </div>
</div>

HTML
HTMLはシンプルにリンクタグを.innerというdivで囲み、さらにもう一つ .bannerというdivで囲んだブロックを.containerというdivの中で3つ横並びにしています。

CSS

.container {
display: flex;
justify-content: space-between
}
.banner {
width: 30%
}
.inner {
position: relative;
overflow: hidden;
max-width: 100%;
padding-top: 56.25%/*16:9*/
}
.inner:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
opacity: .8;/*背景画像 不透明度80%*/
background: url(https://gokansoichiro.com/wp/wp-content/themes/gds/images/blog/google-earth-view-6202.jpg) no-repeat 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;
}
.inner:hover:after {
opacity: 1;
-moz-transform: scale(1.03);
-webkit-transform: scale(1.03);
-ms-transform: scale(1.03);
transform: scale(1.03);
}
.inner a {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
z-index: 1
}

CSS
今回の肝は12行目で.innerに設定したpadding-top:56.25%です。
ここで設定している割合は要素の横幅が基準になっています。
paddingを設定していない状態では高さが0（ゼロ）になります。
そこにpaddingで高さを出しています。
横幅が基準になっているので、レスポンシブで要素の大きさが変わってもアスペクト比を保ったまま伸縮してくれます。

設定する値は、padding-top:100%にすると、横幅と同じ長さということになるので、正方形になります。
今回指定している56.25%はアスペクト比を16:9にするサイズです。
そのほかの比率は以下に例を掲載します。

39行目からのリンクタグは、flexにする事でテキストを簡単に縦横の中央配置にしています。

正方形　1:1 100%
6:4 66.666%
4:3 75%
16:9 56.25%
黄金比 1:618 61.8%

© GOKAN DESIGN STUDIO