Microinteractions - IDM241
Beta Build - Information
Drexel University
Located in Philadelphia, Drexel is known for it’s great co-op program that pushes students to do their best, as well as engineering and technology.
Beta Build - Interaction
Triggers
- Hover over image
- Click gallery button
- Click close button
Rules
- Text slides up from bottom of image on hover
- Background image blurs
- Cursor changes to pointer on hover on gallery button
- On gallery button click the button color fades from blue to red, and the button text changes from "Gallery" to "Close"
- 3 images appear in a grid format, fading in over .5 seconds
- Clicking the red "Close" button on the original image forces 3 of the images to disappear
- Button color fades from red to blue, and "Close" is replaced by "Gallery"
Feedback
- Text slides up from bottom of image on hover
- Background image blurs
- Cursor changes to pointer on hover on gallery button
- On gallery button click the button color fades from blue to red, and the button text changes from "Gallery" to "Close"
- 3 images appear in a grid format, fading in over .5 seconds
- Clicking the red "Close" button on the original image forces 3 of the images to disappear
- Button color fades from red to blue, and "Close" is replaced by "Gallery"
Loops and Modes
- While hovering over the image, extra information appears to describe the image (mode)
- Upon clicking the gallery button, images fade in to show a pop-up image gallery (mode)