Final Build

Triggers

Hover On/Off Photo
Drop shadow is applied to the card and product name is underlined. Photo fades to the next image of the product after 1 second on hover
Drop shadow and product name underline disappears, Photo transitions back to original image after 1 second off hover
Hover On/Off "Cart" Button
Stroke remains aroung the button, fill of the button fades to black, and black text inside fades to white on hover
Fill of the button begins to fade to white, white text inside fades to black, and stroke is visible again after button fades back to white off hover
Click "Cart" Button
Modal slides in from top
Page behind the modal darkens
Hover On/Off "X" Button
Color of the button darkens on hover
Button returns to the original color off hover
Click "X" Button
Modal collapses in center of the page
Hover On/Off "View Cart" Button
Fill of the button fades to gray, and gray text inside fades to white on hover
Fill of the button fades to white, white text inside fades to gray, and stroke is visible again after button fades back to white off hover
Click "View Cart" Button
Cart modal slides in from top
Page behind modal darkens
Hover On/Off "Checkout" Button
Fill of the button fades to gray, and gray text inside fades to white on hover
Fill of the button fades to white, white text inside fades to gray, and stroke is visible again after button fades back to white off hover
Click "Checkout" Button
Checkout modal slides in from top
Page behind modal darkens

Hover On/Off Photo
Drop shadow is applied to the card and product name is underlined. Photo fades to the next image of the product after 1 second on hover
Drop shadow and product name underline disappears, Photo transitions back to original image after 1 second off hover
Hover On/Off "Cart" Button
Stroke remains aroung the button, fill of the button fades to black, and black text inside fades to white on hover
Fill of the button begins to fade to white, white text inside fades to black, and stroke is visible again after button fades back to white off hover
Click "Cart" Button
Modal slides in from top
Page behind the modal darkens
Hover On/Off "X" Button
Color of the button darkens on hover
Button returns to the original color off hover
Click "X" Button
Modal collapses in center of the page
Hover On/Off "View Cart" Button
Fill of the button fades to gray, and gray text inside fades to white on hover
Fill of the button fades to white, white text inside fades to gray, and stroke is visible again after button fades back to white off hover
Click "View Cart" Button
Cart modal slides in from top
Page behind modal darkens
Hover On/Off "Checkout" Button
Fill of the button fades to gray, and gray text inside fades to white on hover
Fill of the button fades to white, white text inside fades to gray, and stroke is visible again after button fades back to white off hover
Click "Checkout" Button
Checkout modal slides in from top
Page behind modal darkens

Mode – When the user clicks on the "Add to cart" button, a modal slides in and the user can click the "X" button to close it. When a user clicks on the "View Cart" or "Checkout" button, their respective modals slide in and can be closed by clicking the "X" button

Some buttons within the modal are not active. This includes the Checkout button on the 'View Cart' modal, Sign in, and Checkout as Guest on the 'Checkout' modal.