maciejpedzich/cats-album
1
0
Fork 0
mirror of https://github.com/maciejpedzich/cats-album.git synced 2024-09-19 18:36:19 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Insert padding between card image and body

Browse Source
This commit is contained in:
Maciej Pędzich 2023-09-03 04:28:47 +02:00
parent d5b245b33a
commit 1f5a65d977
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/CatCard.astro
View File

@ -16,6 +16,7 @@ const { cat } = Astro.props;
alt={cat.data.image.alt} alt={cat.data.image.alt}
loading="lazy" loading="lazy"
decoding="async" decoding="async"
width="350"
height="250" height="250"
/> />
</div> </div>
@ -41,10 +42,12 @@ const { cat } = Astro.props;
margin: 0.5rem 0; margin: 0.5rem 0;
padding: 0; padding: 0;
flex-direction: column; flex-direction: column;
transition-property: transform;
transition-duration: 300ms;
} }
.card h3 { .card h3 {
margin-top: 0.75rem; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
@ -54,6 +57,8 @@ const { cat } = Astro.props;
.img-wrapper { .img-wrapper {
width: 100%; width: 100%;
padding: 2rem;
padding-bottom: 0.75rem;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@ -63,11 +68,9 @@ const { cat } = Astro.props;
width: 100%; width: 100%;
max-height: 250px; max-height: 250px;
object-fit: cover; object-fit: cover;
transition-property: transform;
transition-duration: 300ms;
} }
.card:hover img { .card:hover {
transform: scale(1.1); transform: scale(1.05);
} }
</style> </style>