画像リンクホバー時に画像を拡大する

サンプル

HTML

    <div class="item">
      <a href="#">
        <figure>
          <img src="https://jobtech.jp/bigimage.png" alt="jobtech">
        </figure>
      </a>
    </div>

CSS

.item a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.item a figure {
  overflow: hidden;
  position: relative;
  display: block;
  /* 基本の高さ */
  height: 300px;
}
.item a figure img {
  width: auto;
  height: 100%;
  vertical-align: bottom;
  transition: all 0.2s ease-in-out;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.item a:hover figure img {
  transform: translateX(-50%) scale(1.1, 1.1);
}