Microinteractions - IDM241
Drexel's Ongoing Work Toward Racial Equality And Inclusion
Learn More
Alpha Build - Information
Trigger
Hover On/Off Image
Rules
Frontend
Hover On Image
Modal
color #000738 with Transparency 80% opacity
Ease in from bottom to top with a transition-duration of 1.8s seconds
Fades in with Opacity at 45% to 100% with an animation duration of 2 seconds
Cursor
Changes to Pointer
Text
Text font style Futura, Light Condense,color: #FFFFFF, font-size: 50, line-height: 60, letter-space: 5%, left-aligned
Fade in from Opacity 45% to 100%
Ease in (in sync with modal) from the bottom of the image to top.
Learn more button
Rectangle with border radius: 20px, style: solid, color: #ffffff
Background-color of #ffc915
Font family: Futura, color: black, size: 20px, line-height: 60px, letter-spacing: 0.8px
Fade in from Opacity 45% to 100%
Ease in (in sync with modal) from the bottom of the image to top.
Hover Off Image
Modal
color #000738 with Transparency 80% opacity
Ease out from top to bottom with a transition-duration of 1.8 seconds
Fades out with Opacity at 100% to 0% with an animation duration of 1.8 seconds
Cursor
Changes to Default
Text
Text font style Futura, Light Condense,color: #FFFFFF, font-size: 50, line-height: 60, letter-space: 5%, left-aligned
Fade out from Opacity 100% to 0%
Ease out (in sync with modal) from the top of the image to the bottom
Learn more button
Rectangle with border radius: 20px, style: solid, color: #ffffff
Background-color of #ffc915
Font family: Futura, color: black, size: 20px, line-height: 60px, letter-spacing: 0.8px
Fade out from Opacity 100% to 0%
Ease out (in sync with modal) from the top of the image to the bottom
Feedback
Frontend
Hover On Image
Modal
color #000738 with Transparency 80% opacity
Ease in from bottom to top with a transition-duration of 1.8s seconds
Fades in with Opacity at 45% to 100% with an animation duration of 2 seconds
Cursor
Changes to Pointer
Text
Text font style Futura, Light Condense,color: #FFFFFF, font-size: 50, line-height: 60, letter-space: 5%, left-aligned
Fade in from Opacity 45% to 100%
Ease in (in sync with modal) from the bottom of the image to top.
Learn more button
Rectangle with border radius: 20px, style: solid, color: #ffffff
Background-color of #ffc915
Font family: Futura, color: black, size: 20px, line-height: 60px, letter-spacing: 0.8px
Fade in from Opacity 45% to 100%
Ease in (in sync with modal) from the bottom of the image to top.
Hover Off Image
Modal
color #000738 with Transparency 80% opacity
Ease out from top to bottom with a transition-duration of 1.8 seconds
Fades out with Opacity at 100% to 0% with an animation duration of 1.8 seconds
Cursor
Changes to Default
Text
Text font style Futura, Light Condense,color: #FFFFFF, font-size: 50, line-height: 60, letter-space: 5%, left-aligned
Fade out from Opacity 100% to 0%
Ease out (in sync with modal) from the top of the image to the bottom
Learn more button
Rectangle with border radius: 20px, style: solid, color: #ffffff
Background-color of #ffc915
Font family: Futura, color: black, size: 20px, line-height: 60px, letter-spacing: 0.8px
Fade out from Opacity 100% to 0%
Ease out (in sync with modal) from the top of the image to the bottom
Loops/mode
Event details fade in with a learn more button