【CSS】hoverしたら画像が拡大する

シンプルな造りです

index.html

<div class="inner">
  <ul>
    <li>
      <a href="" class="inview">
        <img src="img/cat01.jpg" alt="" class="img-zoom">
      </a>
    </li>
  </ul>
</div>

style.css

    img {
      max-width: 100%;
    }
    .inner {
      width: 800px;
      margin: 0 auto;
    }

    .inview {
      position: relative;
      overflow: hidden;
      display: block;
    }

    .img-zoom {
      opacity: 1;
      transition: transform 0.3s ease;
    }

    .img-zoom:hover {
      transform: scale(1.1);
    }