home: add product image hover state

This commit is contained in:
andr-ew 2023-07-26 22:00:27 -05:00
parent 29c3662daf
commit d5f8c6633e
2 changed files with 40 additions and 6 deletions

View File

@ -23,12 +23,15 @@ export async function HomeProduct({ product }) {
className={styles.homeProduct} className={styles.homeProduct}
> >
{/* TODO: optimize srcset (adjusting based on featured status) */} {/* TODO: optimize srcset (adjusting based on featured status) */}
<div className={styles.image}>
<Image <Image
src={featuredImage?.url} src={featuredImage?.url}
alt={featuredImage?.altText} alt={featuredImage?.altText}
width={featuredImage?.width} width={featuredImage?.width}
height={featuredImage?.height} height={featuredImage?.height}
/> />
<div className={styles.hoverOverlay} />
</div>
<div> <div>
<p className={styles.title}>{product?.title}</p> <p className={styles.title}>{product?.title}</p>
{collections && collections.length > 0 && ( {collections && collections.length > 0 && (

View File

@ -1,5 +1,6 @@
@use 'styles/_typography'; @use 'styles/_typography';
@use 'styles/_spacing'; @use 'styles/_spacing';
@use 'styles/_colors';
@mixin home-grid { @mixin home-grid {
display: grid; display: grid;
@ -73,6 +74,36 @@
.collections { .collections {
@include typography.subheader; @include typography.subheader;
} }
.image {
position: relative;
.hoverOverlay,
img {
transition: opacity 200ms;
}
.hoverOverlay {
background-color: colors.$black;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
}
&:hover {
.hoverOverlay {
opacity: 1;
}
img {
opacity: 0;
}
}
}
} }
.homeFooter { .homeFooter {