crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-19 16:07:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

home: add product image hover state

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/home/index.js
View File

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

31
components/home/styles.module.scss
View File

@ -1,5 +1,6 @@
@use 'styles/_typography';
@use 'styles/_spacing';
@use 'styles/_colors';
@mixin home-grid {
display: grid;
@ -73,6 +74,36 @@
.collections {
@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 {