akemi/noway.moe
1
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Pages: add hover effect on cat images

Browse source
This commit is contained in:
Akemi Izuko 2023-12-30 02:28:14 -07:00
parent e93c62e45a
commit fada5e4880
Signed by: akemi
GPG key ID: 8DE0764E1809E9FC
1 changed files with 24 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/pages/meow.astro
View file

@ -5,7 +5,7 @@ import Footer from '../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
import { Image } from 'astro:assets'; import { Image } from 'astro:assets';
const imageFiles = (await Astro.glob('../assets/cat-pics/*')).sort().reverse(); const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
--- ---
<head> <head>
@ -27,14 +27,16 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*')).sort().reverse();
</div> </div>
<div class="masonary"> <div class="masonary">
{ {
imageFiles.map((img) => ( imageFiles.reverse().map((img) => (
<div class="meow-grid"> <div class="meow-grid">
<Image <a href={img.default.src}>
src={img.default} <Image
width="600" src={img.default}
alt="Photo of a pizza" width="600"
class="meow-image" alt="Photo of a pizza"
/> class="meow-image"
/>
</a>
</div> </div>
)) ))
} }
@ -73,4 +75,18 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*')).sort().reverse();
grid-row: 1 / -1; grid-row: 1 / -1;
grid-column: 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);
}
}
</style> </style>