Commit d59b219
Changed files (2)
src
components
utils
widgets
src/components/utils/ImageWrapper.astro
@@ -43,8 +43,6 @@ const imageStyle = `object-position: ${position}`;
---
<div id={id} class:list={[className, 'relative overflow-hidden']}>
- <div class="pointer-events-none absolute inset-0 bg-opacity-50 transition dark:bg-black/10">
- </div>
{isLocal && img && <Image src={img} alt={alt || ''} class={imageClass} style={imageStyle} />}
{
!isLocal && (
src/components/widgets/PostCardCover.astro
@@ -12,7 +12,7 @@ const { url, title, cover } = Astro.props;
---
<a href={url} title={title} class="group">
- <div>
+ <div class="cover-mask">
<Icon name="material-symbols:chevron-right-rounded" />
</div>
<ImageWrapper src={cover} alt={title} />
@@ -20,16 +20,12 @@ const { url, title, cover } = Astro.props;
<style>
a {
- @apply relative min-h-48 w-full md:w-3/4 md:max-w-96;
+ @apply relative min-h-48 w-full overflow-hidden rounded-md md:w-3/4 md:max-w-96;
@apply duration-100 active:scale-95 active:brightness-75;
}
- img {
- @apply h-full w-full rounded-md object-cover;
- }
-
- div {
- @apply absolute inset-0 h-full w-full bg-black/60;
+ div.cover-mask {
+ @apply absolute inset-0 z-10 h-full w-full bg-black/60;
@apply flex items-center justify-center;
@apply opacity-0 duration-300 group-hover:opacity-100;
}