Tutorial No.3

OverLay Popup

Simple overlay popup with scale effect using CSS pseudo element and jQuery. CSS animation effects will not be included

  Still remember us?

Creat HTML

  ‒ Dont' forget our friend Font-Awesome

  • ♦  We'll choose font 'fa-plus' for the button
  • ♦  Div '.overlay' is the layer that appears when the button is clicked
  • ♦  Div '.overlay-button' is the div that contains the button
  • ♦  Button has an id of '#overlay-button'
  • ♦  Look out for '.' and '#' in the stylesheet since the naming is similar

jQuery + Understanding :before

  ‒ Goal: when clicked, the '.overlay' div toggles between having a class '.expand' and not

  • ♦  Pseudo Element':before' inserts an element in front of another element
  • ♦  The ':before' we are creating will have an empty content, we only need background shape and color
  • ♦  As seen on the first page, the overlay div grows out of the button
  • ♦  Actually it doesn't, the button only sits on top of the shape that's growing by using z-index
  • ♦  When clicked, the element created by using ':before' will change to a bigger size
  • ♦  The '.expand' class we are about to create will have the properties for the overlay div when clicked

CSS Pseudo Element :before

  ‒ Position the '.overlay' div and '.overlay:before' as 'absolute'

  • ♦  Using :before, we insert an element (1x1) in front of the overlay, behind the button (z-index:10003)
  • ♦  Time for '.expand' and '.expand:before' to describe what happens after the button is clicked
  • ♦  '.expand' makes the overlay visible, it's originally set to invisible
  • ♦  '.expand:before' tells the element we inserted to get bigger (2000 x 2000)
  • ♦  By giving both element with ':before' a transition property, the growth is seen and timed