🦔

【CSS】マウスオーバーで画像拡大（2022年11月30日業務報告）

2022/11/30に公開

CSS

HTML

PHP

tech

背景画像をマウスオーバーすると拡大する

こちらの記事を参考に実装できました。ありがとうございます。

が！マウスオーバーすると画像が２段階で拡大されてしまいます。

わかりますかね？
画像全体が一度大きくなった後に、画像内で拡大が行われる状態です。

やりたいことは、元々の画像の大きさは変えないで、その範囲内で画像を拡大したいということです。

指定しているコードは以下の通りです。

.box {
    max-width: 400px;
    width: 100%;
    padding: 10px;
    overflow: hidden;
    position: relative;
.box-bg {
    height: 350px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform .6s ease;
  }
.box:hover .box-bg {
    transform: scale(1.1);
  }

範囲外に画像が広がるということは、はみ出した部分も表示されている（つまり、overflow: hiddenが効いていない）のかな？と思って調べてみました。

overflow:hidden内にposition: absoluteがあるのに、overflow:hiddenを指定した要素にposition: relativeがない場合は、overflow: hiddenが効かないという記事は見つけましたが、上記の通り指定はされています。

ということで原因は他のところにあるようですが、結論としてはpaddingでした。

他の要素とのスキマを作るためにpaddingを指定していましたが、この場合拡大する際にpadding分は表示されるため、範囲外に広がったように見えていました（実際は要素の範囲内）。

paddingをmarginに変更したところ、無事に元の画像の大きさはそのままで範囲内だけで拡大させることができました。
マウスオーバー修正後

修正前
マウスオーバー

マウスオーバー時に画像だけで、文字は拡大しない

今度はマウスオーバーしたときに文字まで一緒に拡大されてしまうのを修正する。
マウスオーバー文字ごと拡大

こちらを参考に対応できました。ありがとうございます。
https://flex-box.net/scale/

ポイントは、背景画像を表示する要素とテキストを表示する要素を、親子要素とするのではなく、並べて兄弟要素とする点でした。
これによりtransform: scale(1.1);の指定が当たるのが「box-bg」のみとなるので、テキストのある「box-text」は変化しないということですね。

対応前

<div class="box-bg">
    <div class="box-text">
        <h3>テスト</h3>
        <p>テキストテキスト</p>
    </div>
</div>

対応後

<div class="box-bg"></div>
<div class="box-text">
    <h3>テスト</h3>
    <p>テキストテキスト</p>
</div>

マウスオーバー文字は拡大しない

メモ

CSS MediaQueryでmin-widthとmax-widthの使い分け

@media (max-width: ◯◯px) {
  // 画面サイズが◯◯px以下に適用
}

@media (min-width: ◯◯px) {
  // 画面サイズが◯◯px以上に適用
}

基本的に、min-width で書いた方が良いとのこと。

作業心得

実装の仕方がわからないときに、すぐにやり方で調べるのではなく今の知識で実装する方法を考える。
それでもわからなければやり方を教えているサイトからコピペで実装する。
実装した後はコード１つ１つの内容を確認しながら、動きを理解するところまで落とし込む。
その過程でインデントを直したり、不要なコードを削除したりする。
その後、自分でコードを書いて実装する（意識して反復作業を行う）
作業はブロック単位で行う。脳のメモリを効率良く使う。その都度コミットを打つ。