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