画像のホバーアニメーション

<div class="c-card01">
                  <a href="#" class="c-card01__link">
                    <picture class="c-card01__image">
                      <img src="https://tomoka-shimme.com/wp-content/uploads/2023/10/category1-scaled.jpg" alt='No maintenance' width='325' height='280' loading='lazy'>
                    </picture>
                  </a>
                </div>

.c-card01 {
overflow: hidden;
}

.c-card01__link {
position: relative;
z-index: 0;
display: block;
overflow: hidden;
}

.c-card01__link:hover .c-card01__image img {
  transform: scale(1.1);
}


.c-card01__image::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(42 42 42 / .5);
  z-index: 1;
}

.c-card01__image img {
aspect-ratio: 325/280;
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease-in-out;
position: relative;
z-index: -1;
@include mq('md') {
aspect-ratio: 400/280;
}
}