From fada5e4880895ae7500fd75a9d357ee298e9e395 Mon Sep 17 00:00:00 2001 From: Akemi Izuko Date: Sat, 30 Dec 2023 02:28:14 -0700 Subject: [PATCH] Pages: add hover effect on cat images --- src/pages/meow.astro | 32 ++++++++++++++++++++++++-------- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/src/pages/meow.astro b/src/pages/meow.astro index fbae3fd..d606f22 100644 --- a/src/pages/meow.astro +++ b/src/pages/meow.astro @@ -5,7 +5,7 @@ import Footer from '../components/Footer.astro'; import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; import { Image } from 'astro:assets'; -const imageFiles = (await Astro.glob('../assets/cat-pics/*')).sort().reverse(); +const imageFiles = (await Astro.glob('../assets/cat-pics/*')); --- @@ -27,14 +27,16 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*')).sort().reverse();
{ - imageFiles.map((img) => ( + imageFiles.reverse().map((img) => (
- Photo of a pizza + + Photo of a pizza +
)) } @@ -73,4 +75,18 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*')).sort().reverse(); grid-row: 1 / -1; grid-column: 1; } + .meow-image:hover { + box-shadow: 0px 10px 60px -10px; + transform: translatey(-10px); + cursor: pointer; + animation: float 1s ease-in-out; + } + @keyframes float { + 0% { + transform: translatey(0px); + } + 100% { + transform: translatey(-10px); + } + }