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

共通の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>

ホバーすると拡大

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);
  }

ホバーすると縮小

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%);
  }