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

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