Microinteractions - IDM241

Slide1

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