Hover On

• The image switches from grayscale to full color.

• The image also zooms in slightly

• The card background color changes to gradient

• cursor changes to pointer

Hover Off

• The image switches from full color to grayscale.

• The image also zooms out slightly to default.

• The card background color changes from the gradient to default.

• cursor changes back to arrow

+ button Click to open

• "+" icon rotates 135 degree to make an "x" icon

• menu bar slides open to the right

x button click to close

• "x" icon rotates back to make a "+" icon

• menu bar slides to close

"favorite" button click

• button gets filled in black

• undo the black fill in

Hover On

• The image switches from grayscale to full color.

• The image also zooms in slightly

• The card background color changes to gradient

Hover Off

• The image switches from full color to grayscale.

• The image also zooms out slightly to default.

• The card background color changes from the gradient to default.

+ button Click to open

• menu bar slides open to the right

x button click to close

• menu bar slides to close

"favorite button click"

• button gets filled in black

• undo the black fill in