cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-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.

            
              <div class='main-wrapper'>
  
  <div class='hero-image'>
    <div class='hero-content'>
      <div class='hc-label'>The Italian Dolomites</div>
      <div class='hc-desc'>Interview with Andy Free about his trip to the dolomites in Italy</div>
      <div class='hc-footer'>
        <div class='hcf-comments'><span class='amount'>168</span>Comments</div>
        <div class='hcf-divider'></div>
        <div class='hcf-shares'><span class='amount'>26.842</span>Shares</div>
        <div class='hcf-toggle'>
          <p class='hcft-label'>More Articles</p>
          <div class='hcft-icon-holder'>
            <i class='hcft-icon closed fa fa-chevron-down'></i>
            <i class='hcft-icon opened fa fa-times'></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class='scroll-content'>
    <div class='sc-row'>
      <div class='content-article'>
        <div class='article-number'>01</div>
        <div class='article-info'>
          <div class='ai-label'>Visiting Vester Peak</div>
          <div class='ai-desc'>Everything you should know about hiking in the mountains</div>
          <div class='ai-footer'>
            <div class='aif-comments'><span class='amount'>24</span>Comments</div>
            <div class='aif-divider'></div>
            <div class='aif-shares'><span class='amount'>128</span>Shares</div>
          </div>
        </div>
        <div class='article-image ca-1'></div>
      </div>
      <div class='content-article'>
        <div class='article-number'>02</div>
        <div class='article-info'>
          <div class='ai-label'>Trailing Together</div>
          <div class='ai-desc'>Walking among the nature in the Rocky Mountain National Park, Colorado</div>
          <div class='ai-footer'>
            <div class='aif-comments'><span class='amount'>458</span>Comments</div>
            <div class='aif-divider'></div>
            <div class='aif-shares'><span class='amount'>110</span>Shares</div>
          </div>
        </div>
        <div class='article-image ca-2'></div>
      </div>
    </div>
    <div class='sc-row'>
      <div class='content-article'>
        <div class='article-number'>03</div>
        <div class='article-info'>
          <div class='ai-label'>The Magic Pond</div>
          <div class='ai-desc'>The scenery is set like a Monet painting</div>
          <div class='ai-footer'>
            <div class='aif-comments'><span class='amount'>1640</span>Comments</div>
            <div class='aif-divider'></div>
            <div class='aif-shares'><span class='amount'>86.451</span>Shares</div>
          </div>
        </div>
        <div class='article-image ca-3'></div>
      </div>
      <div class='content-article'>
        <div class='article-number'>04</div>
        <div class='article-info'>
          <div class='ai-label'>Beach Essentials</div>
          <div class='ai-desc'>What should you bring to the beach, and what beaches should you visit?</div>
          <div class='ai-footer'>
            <div class='aif-comments'><span class='amount'>58</span>Comments</div>
            <div class='aif-divider'></div>
            <div class='aif-shares'><span class='amount'>1.359</span>Shares</div>
          </div>
        </div>
        <div class='article-image ca-4'></div>
      </div>
    </div>
    <div class='sc-row'>
      <div class='content-article'>
        <div class='article-number'>05</div>
        <div class='article-info'>
          <div class='ai-label'>Romantic Camping</div>
          <div class='ai-desc'>We went to Norway to find out just how romantic it can be sleeping under the stars</div>
          <div class='ai-footer'>
            <div class='aif-comments'><span class='amount'>14</span>Comments</div>
            <div class='aif-divider'></div>
            <div class='aif-shares'><span class='amount'>36</span>Shares</div>
          </div>
        </div>
        <div class='article-image ca-5'></div>
      </div>
      <div class='content-article'>
        <div class='article-number'>06</div>
        <div class='article-info'>
          <div class='ai-label'>Cave Explorers</div>
          <div class='ai-desc'>In USA there's over a thousand caves. We list everyone that you should visit.</div>
          <div class='ai-footer'>
            <div class='aif-comments'><span class='amount'>3590</span>Comments</div>
            <div class='aif-divider'></div>
            <div class='aif-shares'><span class='amount'>129.547</span>Shares</div>
          </div>
        </div>
        <div class='article-image ca-6'></div>
      </div>
    </div>
  </div>
</div>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Oxygen:400,300,700)

$content-padding: 40px
$nav-height: 60px
$hero-stop: 40%
$hero-speed: .5s

.ca-1
  background: url('https://farm1.staticflickr.com/571/21101592188_f5da31c3f5_o.jpg') no-repeat center center
  
.ca-2
  background: url('https://i.redd.it/ool7yp323aux.jpg') no-repeat center center
  
.ca-3
  background: url('https://i.redd.it/cz572ctve9ux.jpg') no-repeat center center
  
.ca-4
  background: url('https://i.redd.it/etwqy45ntqcx.jpg') no-repeat center center
  
.ca-5
  background: url('https://farm6.staticflickr.com/5692/21342201074_aef835df8d_k.jpg') no-repeat center center
  
.ca-6
  background: url('https://i.redd.it/co3a6ufwmuqx.jpg') no-repeat center center

*
  margin: 0
  padding: 0
  box-sizing: border-box

.clear-after
  &:after
    content: ''
    display: block
    clear: both
  
body
  text-rendering: auto
  -webkit-font-smoothing: antialiased
  font-family: Oxygen
  color: white
  
.main-wrapper
  position: relative
  width: 100vw
  height: 100vh
  overflow: hidden
  
  .hero-image
    z-index: 3
    position: relative
    width: 100%
    height: 100%
    background: url('https://c1.staticflickr.com/1/632/21136101110_1dde1c1a7e_o.jpg') no-repeat center center fixed 
    background-size: cover
    box-shadow: 0 5px 60px 10px rgba(black, .75)
    transition: all $hero-speed ease
    &.browsing-content
      height: $hero-stop
      background-position: center -150px
      &:after
        opacity: 1
        height: 100%
      .hcft-icon
        &.closed
          opacity: 0 !important
      .hcft-icon
        &.opened
          opacity: 1 !important
    &:after
      content: ''
      display: block
      position: absolute
      background: linear-gradient(0deg, rgba(black, 1), rgba(black, 0))
      height: 50%
      width: 100%
      bottom: 0
      left: 0
      opacity: 0.65
      transition: all $hero-speed ease
    .hero-content
      position: absolute
      z-index: 4
      width: 100%
      padding: $content-padding
      bottom: 0
      .hc-label
        font-size: 44px
        text-transform: uppercase
        font-weight: 700
      .hc-desc
        font-size: 22px
        text-transform: uppercase
        font-weight: 300
      .hc-footer
        @extend .clear-after
        margin-top: calc(#{$content-padding} / 1.5)
        line-height: 32px
        font-size: 14px
        .hcf-divider
          float: left
          margin: 7px 10px
          height: 18px
          width: 1px
          background-color: white
        .hcf-comments,
        .hcf-shares
          float: left
          text-transform: uppercase
          .amount
            margin-right: 5px
            font-weight: 700
        .hcf-toggle
          float: right
          .hcft-label
            float: left
            line-height: 32px
            margin-right: 10px
            text-transform: uppercase
          .hcft-icon-holder
            float: left
            position: relative
            width: 32px
            height: 32px
            text-align: center
            background-color: rgba(black, .25)
            transition: background-color .25s ease
            &:hover
              background-color: rgba(black, .5)
            .hcft-icon
              cursor: pointer
              line-height: 32px
              width: 32px
              left: 0
              position: absolute
              font-size: 14px
              transition: all $hero-speed ease
              &.closed
                opacity: 1
              &.opened
                opacity: 0
                
  .scroll-content
    position: absolute
    top: $hero-stop
    left: 0
    width: 100%
    overflow: auto
    height: calc(100% - #{$hero-stop})
    .sc-row
      @extend .clear-after
      z-index: 1
      .content-article
        float: left
        cursor: pointer
        width: 50%
        height: 360px
        overflow: hidden
        position: relative
        &:after
          content: ''
          display: block
          position: absolute
          background: linear-gradient(0deg, rgba(black, .85), rgba(black, 0.1))
          height: 100%
          width: 100%
          bottom: 0
          left: 0
          opacity: 1
          transition: opacity .25s ease
        &:hover
          &:after
            opacity: 0
          .article-image
            transform: scale(1.1) !important
        .article-image
          width: 100%
          height: 100%
          background-size: cover
          transform: scale(1)
          transition: all .25s ease
        .article-number
          z-index: 2
          position: absolute
          top: $content-padding
          left: $content-padding
          font-size: 20px
          font-weight: 700
          letter-spacing: 2px
        .article-info
          z-index: 2
          position: absolute
          bottom: 0
          padding: $content-padding
          text-transform: uppercase
          .ai-label
            font-size: 20px
            font-weight: 700
            margin-bottom: calc(#{$content-padding} / 4)
          .ai-desc
            font-size: 16px
            font-weight: 300
          .ai-footer
            @extend .clear-after
            line-height: 20px
            margin-top: calc(#{$content-padding} / 4)
            .aif-comments, .aif-shares
              float: left
              font-size: 14px
              .amount
                font-weight: 700
                margin-right: 5px
            .aif-divider
              float: left
              height: 14px
              margin: 3px 10px
              width: 1px
              background-color: white
              
        
        
    
            
          
!
            
              $('.hcft-icon').click(function() {
  $('.hero-image').toggleClass('browsing-content');
});
            
          
!
999px
Loading ..................

Console