・画像をhover（ホバー）したら拡大させるにはどうやるの？
こんな疑問にお答えします。
案件によっては画像をホバーしたら拡大させる実装をしますよね。
下記見たいな感じに↓
これ実はCSSのみで簡単に実装可能です。
すぐにできるよ！
ということで、この記事では「画像をhover（ホバー）したら拡大する」について解説していきます！
・画像をhover（ホバー）したら拡大する
・背景画像をhover（ホバー）したら拡大する
目次
【簡単】画像をhover（ホバー）したら拡大する【CSS】
そんな画像をホバーしたら拡大するサンプルがこちら↓
See the Pen 画像ホバーで拡大➀ by jito-coder (@jito-coder) on CodePen.
ホバーしてみると大きくなりますよね。
<div class="test-img">
<img src="https://jito-site.com/wp-content/uploads/2022/12/test01.jpg" alt="" width="1280" height="843">
</div>.test-img {
width: min(100%, 450px);
margin-inline: auto;
overflow: hidden;
cursor: pointer;
}
.test-img img {
transition: transform .5s ease;
}
.test-img:hover img {
transform: scale(1.3);
}コードの中で重要な点がこちら↓
- imgタグを囲む親要素を作る
- 親要素をホバーしたら拡大させる指定をする
- 親要素の横幅からはみ出る部分を隠す
順に解説してきます。
まずHTMLにて、imgタグを囲む親要素を作成しましょう。
今回は「test-img」というdivタグを作って囲みました。
<div class="test-img">
<img src="https://jito-site.com/wp-content/uploads/2022/12/test01.jpg" alt="" width="1280" height="843">
</div>続いてホバー時に拡大させるアニメーションについて記述していきます。
下記のように拡大が終わるまでの時間、拡大率を指定してあげましょう。
// ゆっくり拡大させるよう記述
.test-img img {
transition: transform .5s ease;
}
// 拡大率を記述
.test-img:hover img {
transform: scale(1.3);
}scaleの値を大きくすれば、拡大率を上げれますよ。
これでホバー時の拡大のアニメーションが指定できました。
ただしこのままでは、下記のように親要素からはみ出てしまいます。
親要素からはみ出ないために「overflow: hidden;」を指定しましょう。
.test-img {
width: min(100%, 450px);
margin-inline: auto;
overflow: hidden;
cursor: pointer;
}これではみ出さずに、ホバーしたらゆっくり拡大する実装ができました！
【簡単】画像をhover（ホバー）したら拡大する【背景画像編】
最後に背景画像をホバーした時に拡大する実装を紹介していきます。
そんなサンプルがこちら↓
See the Pen 画像ホバーで拡大➁ by jito-coder (@jito-coder) on CodePen.
背景画像として表示しておりますが、こちらもホバーしたら拡大しますよね。
<div class="test-img">
<div class="test-img__item"></div>
</div>.test-img {
width: min(100%, 450px);
margin-inline: auto;
overflow: hidden;
cursor: pointer;
}
.test-img__item {
background-image: url(https://jito-site.com/wp-content/uploads/2022/12/test01.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding-top: 67%;
transition: transform .5s ease;
}
.test-img:hover .test-img__item {
transform: scale(1.3);
}基本的な作りとしては、先ほどと同じです。
コードの中で重要な点がこちら↓
- 親要素のタグと背景用の子要素のタグを作る
- 子要素に対して背景画像を指定
- 親要素をホバーしたら子要素を拡大させる
- 親要素の横幅からはみ出る部分を隠す
順に解説してきます。
まず背景画像を表示するタグと、それを囲む親要素のタグを作成しましょう。
下記みたいな感じです↓
<div class="test-img">
<div class="test-img__item"></div>
</div>続いて子要素に対して、背景画像を指定しましょう。
.test-img__item {
background-image: url(https://jito-site.com/wp-content/uploads/2022/12/test01.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding-top: 67%;
}大きさ等はデザインに合わせて変えてみてください。
そしたらホバー時のアニメーションについて記述しましょう。
.test-img__item {
// ゆっくり拡大させるよう記述
transition: transform .5s ease;
}
// 拡大率を記述
.test-img:hover .test-img__item {
transform: scale(1.3);
}scaleの値を大きくすれば、拡大率を上げれますよ。
ただこのままでは、親要素からはみ出てしまいます。
親要素からはみ出ないために「overflow: hidden;」を指定しましょう。
.test-img {
width: min(100%, 450px);
margin-inline: auto;
overflow: hidden;
cursor: pointer;
}これではみ出さずに、ホバーしたらゆっくり拡大する実装ができました！
【簡単】画像をhover（ホバー）したら拡大する【CSS】：まとめ
- imgタグを囲む親要素を作る
- 親要素をホバーしたら拡大させる指定をする
- 親要素の横幅からはみ出る部分を隠す
画像をhover（ホバー）したら拡大させたい時はためしてみてね！
