cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              html
  body
    // Demo stuff
    main
      h1
        a(href='http://ettrics.com/') Ettrics
      p
        | A Material Design inspired expanding overlay for showcasing a variety of content.
      p
        a(href='https://twitter.com/ettrics/', target='_blank')
          i.fa.fa-twitter
      img.plate(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/plate.svg', alt='')
    // Component starts here
    ul.blocks-names
      li.blocks__name Eggs
      li.blocks__name Bacon
      li.blocks__name Toast
      li.blocks__name Donuts
      li.blocks__name Coffee
    ul.blocks
      li#1.blocks__block
      li#2.blocks__block
      li#3.blocks__block
      li#4.blocks__block
      li#5.blocks__block
    ul.blocks-content
      li.blocks-content__content
        .content__close
        h2 Eggs
        p
          | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae modi esse, totam sequi non quae, rerum facilis nesciunt iusto praesentium officiis assumenda dignissimos. Saepe, facere incidunt. Laudantium quisquam asperiores sint.
        i.blocks__content-close.fa.fa-close
      li.blocks-content__content
        h2 Bacon
        p
          | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti ducimus voluptate velit quae cumque neque minima harum libero eligendi alias laboriosam ad, consequuntur error atque incidunt assumenda sapiente! Architecto, excepturi?
        i.blocks__content-close.fa.fa-close
      li.blocks-content__content
        h2 Toast
        p
          | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint eligendi quis accusantium recusandae iusto sed, magni iure magnam, architecto quisquam pariatur minus, rem alias. Eum voluptatem maiores quae reiciendis cupiditate.
        i.blocks__content-close.fa.fa-close
      li.blocks-content__content
        h2 Donuts
        p
          | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus officiis voluptates et, atque animi quae hic dolorem neque magnam reprehenderit sint dolor omnis modi mollitia labore quidem aspernatur ab architecto.
        i.blocks__content-close.fa.fa-close
      li.blocks-content__content
        h2 Coffee
        p
          | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus officiis voluptates et, atque animi quae hic dolorem neque magnam reprehenderit sint dolor omnis modi mollitia labore quidem aspernatur ab architecto.
        i.blocks__content-close.fa.fa-close

            
          
!
            
              $color1 = #f4d35d
$color2 = #db5b4a
$color3 = #e2bb7f
$color4 = #f67b7d
$color5 = #a1775a
*
  box-sizing: border-box
body
  font-family: 'Open Sans'
  font-weight: 400
  text-align: center
.blocks
  position: fixed
  bottom: 0
  z-index: 1
  list-style-type: none
  display: flex
  width: 100%
  margin: 0
  padding: 0
  &__block
    will-change: transform
    position: relative
    height: 20vh
    flex: 1
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1)
    &:nth-child(1)
      background: $color1
      transform-origin: 0% 100%
    &:nth-child(2)
      background: $color2
      transform-origin: 25% 100%
    &:nth-child(3)
      background: $color3
      transform-origin: 50% 100%
    &:nth-child(4)
      background: $color4
      transform-origin: 75% 100%
    &:nth-child(5)
      background: $color5
      transform-origin: 100% 100%
    &.active
      z-index: 2
.blocks-content
  list-style-type: none
  margin: 0
  padding: 0
  position: absolute
  bottom: 0
  left: 0
  height: 100vh
  width: 100%
  &__content
    will-change: transform, opacity
    display: flex
    align-items: center
    justify-content: center
    text-align: center
    flex-direction: column
    position: fixed
    width: 100%
    z-index: 3
    top: 0
    left: 0
    height: 100vh
    padding: 10vw
    font-size: 20px
    opacity: 0
    visibility: hidden
    text-align: center
    transform: scale(0.9)
    transition: all .3s .2s ease-out
    &.active
      opacity: 1
      transform: scale(1)
      visibility: visible
  .blocks__content-close
    position: absolute
    right: 2vw
    top: 2vh
    font-size: 30px
    cursor: pointer
    transition: all .2s ease-out
    &:hover
      transform: scale(1.1)
  p
    font-size: 16px
    line-height: 2
    max-width: 800px
  h2
    padding: 15px 30px
    font-weight: 300
    letter-spacing: 6px
    box-shadow: inset 0 0 0 3px black
.blocks-names
  position: fixed
  bottom: 0
  left: 0
  z-index: 2
  width: 100%
  list-style-type: none
  margin: 0
  padding: 0
  display: flex
  font-size: 18px
  letter-spacing: 4px
  cursor: pointer
  transition: all .15s ease-out
  .blocks__name
    flex: 1
    height: 20vh
    display: flex
    align-items: center
    justify-content: center
/* Demo */
main
  position: relative
  z-index: 1
  padding: 3vh 5vw
  height: 80vh
  display: flex
  flex-flow: column wrap
  justify-content: center
  background: rgba(#edc982, 0.85)
  h1
    margin: 0
    font-weight: 300
    color: #38C5B9
    a
      font-size: 48px
  p
    font-weight: 300
    font-size: 16px
    max-width: 340px
    margin: 7px auto
  a
    text-decoration: none
    color: #38C5B9
    font-size: 30px
  .plate
    position: absolute
    top: 50%
    left: 50%
    max-width: 380px
    width: 100%
    transform: translate(-50%, -50%)
    z-index: -1
            
          
!
            
              block = $('.blocks__block')
bname = $('.blocks__name')
content = $('.blocks-content__content')
closeBtn = $('.blocks__content-close')
wHeight = $(window).outerHeight()
wWidth = $(window).outerWidth()
bHeight = block.outerHeight()
bWidth = block.outerWidth()
xVal = Math.round(wWidth / bWidth) + 0.03
yVal = wHeight / bHeight + 0.03

expand = ->
  num = $(this).index()
  aBlock = block.eq(num)
  if !aBlock.hasClass('active')
    bname.css 'opacity', '0'
    aBlock.css
      'transform': 'scale(' + xVal + ',' + yVal + ')'
      '-webkit-transform': 'scale(' + xVal + ',' + yVal + ')'
    aBlock.addClass 'active'
    openContent num
  return

openContent = (num) ->
  content.css
    'transition': 'all 0.3s 0.4s ease-out'
    '-webkit-transition': 'all 0.3s 0.4s ease-out'
  aContent = content.eq(num)
  aContent.addClass 'active'
  return

closeContent = ->
  bname.css 'opacity', '1'
  content.css
    'transition': 'all 0.1s 0 ease-out'
    '-webkit-transition': 'all 0.1s 0 ease-out'
  block.css
    'transform': 'scale(1)'
    '-webkit-transform': 'scale(1)'
  block.removeClass 'active'
  content.removeClass 'active'
  return

updateValues = ->
  `var yVal`
  `var xVal`
  `var bWidth`
  `var bHeight`
  `var wWidth`
  `var wHeight`
  if block.hasClass('active')
    aBlock = $('.blocks__block.active')
    wHeight = $(window).height()
    wWidth = $(window).width()
    bHeight = block.height()
    bWidth = block.width()
    xVal = Math.round(wWidth / bWidth) + 0.03
    yVal = wHeight / bHeight + 0.03
    aBlock.css
      'transform': 'scale(' + xVal + ',' + yVal + ')'
      '-webkit-transform': 'scale(' + xVal + ',' + yVal + ')'
  return

$(window).on 'resize', updateValues
bname.on 'click', expand
closeBtn.on 'click', closeContent
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console