▲TOPへ戻る

【CSS】マウスを乗せた(ホバーした)時、サムネイル画像を拡大・縮小する方法

transform scale
このように記事のリストのサムネイル画像を、マウスをホバーした時に、画像を拡大したり、縮小したりする方法を紹介します。

共通のHTML

まずは共通のHTML
HTML
  <div class="content">
    <ul class="articles">
      <li>
        <a href="">
          <div class="thumbnail">
            <img src=".jpg" alt="" />
          </div>
          <h2>記事1タイトル</h2>
          <p>記事1コンテンツコンテンツコンテンツ</p>
        </a>
      </li>
      <li>
        <a href="">
          <div class="thumbnail">
            <img src=".jpg" alt="" />
          </div>
          <h2>記事2タイトル</h2>
          <p>記事2コンテンツコンテンツコンテンツ</p>
        </a>
      </li>
      <li>
        <a href="">
          <div class="thumbnail">
            <img src=".jpg" alt="" />
          </div>
          <h2>記事3タイトル</h2>
          <p>記事3コンテンツコンテンツコンテンツ</p>
        </a>
      </li>
    </ul>
  </div>

ホバーすると拡大

  1. 親要素にはoverflow: hiddenposition: relative
  2. 子要素(img)には、
    position:absolute
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  3. <li>..</li>をホバーしたら、
    transform: translate(-50%, -50%) scale(1.2);
CSS
  .content .articles > li .thumbnail {
    height: 120px;
    position: relative;
    overflow: hidden;
  } 
  .content .articles img {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.3s;
  }
  .content .articles > li a:hover .thumbnail img {
    transform: translate(-50%, -50%) scale(1.2);
  }

ホバーすると縮小

  1. 親要素にはoverflow: hiddenposition: relative
  2. 子要素(img)には、
    position:absolute
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2);
  3. <li>..</li>をホバーしたら、
    transform: translate(-50%, -50%);
CSS
  .content .articles > li .thumbnail {
    height: 120px;
    position: relative;
    overflow: hidden;
  } 
  .content .articles img {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2);
    transition: 0.3s;
  }
  .content .articles > li a:hover .thumbnail img {
    transform: translate(-50%, -50%);
  }
point

親要素にはoverflow: hiddenposition: relative

拡大するには、ホバーした時に、
transform: scale(1.2);

縮小するには、ホバーする前の画像に、
transform: scale(1.2);
ホバーした時に、
transform: scale(1.2);の指定を外す。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ