Trigger:

• Hover over & click on photo.
• Hover over & click on arrows & text inside modal.
• Hover over & click on small photos inside modal.
• Hover over & click on X in modal.

Rules:

• Cursor changes to pointer when hovering over the image.
• On hover, the photo expands, a drop shadow appears, and a new photo fades in on top of current photo after 2 seconds.
• Photo goes back to original size & drop shadow disappears when hovered off the photo.
• Remains on the same photo the slideshow was on when hovered off the photo.
• When the photo is clicked on, a modal pops up with a larger image of a photo from the slideshow on the lefthand side and with photos and reviews on the righthand side. On smaller screens, the large photo is on the top and the photos & reviews are at the bottom of the modal.
• The modal slides up and fades in from the bottom and a black background with a low opacity fades in behind the modal.
• When the user hovers over the photo or reviews section in the modal, the cursor changes to a pointer and the text, arrow, and line decreases in opacity. When hovered off, the section goes back to 100% opacity.
• When the photos or reviews section is clicked on, the arrow animates downwards and shows the content below fading in and sliding out towards the bottom. When it is clicked on again, the content disappears by fading out and sliding up towards the top. The arrow animates upwards as well.
• When the user hovers over one of the smaller photos in the modal, the cursor changes to a pointer, and it decreases in opacity. When hovered off, it goes back to 100% opacity.
• When the smaller photo is clicked on, it changes the large photo to the same image. The photo dropdown closes once an image is clicked on and the arrow points upwards again.
• When user hovers over the X on the modal, the cursor changes to pointer and the X hover state lowers in opacity.
• When x is clicked on the modal, the background fades out back to 0% opacity and the modal slides off and fades out of the screen towards the bottom.

Feedback:

• Same as rules.

Loop & Modes:

• Slideshow repeats until user is no longer hovering over the photo.
• When the user clicks on the image, a modal comes up on the screen and when the user hovers over the X it changes to a lower opacity to indicate the user can click on it to close the modal.