Animation

Animate Image by MouseOver / Hover

CSS

      .book {
        width: 300px;
        height: 480px;
        position: relative;
        transform-style: preserve-3d;
        transform: rotateY(-30deg);
        transition: 1s ease;
        animation: 1s ease 0s 1 initAnimation;
      }

      .book:hover {
        transform: rotateY(0deg);
      }

page.astro

        ><div class="book">
          <Image
            src={"/cover-2.jpeg"}
            width={300}
            height={600}
            alt={book.title}
            format={"avif"}
          />
        </div>