Astro – Cookbook
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>