cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

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.

            
              

<!------------------------------------------
- INITIAL CONTENT
------------------------------------------->
    <initial>
      <h1><a href="">Material Design</a></h1>
      <p>An Ettrics inspired expanding overlay for showcasing a variety of content.</p>
    </initial>

<div id='container'>
<!------------------------------------------
- BLOCKS
------------------------------------------->
    <ul class="blocks">
      <li id="1" class="blocks__block"></li>
      <li id="2" class="blocks__block"></li>
      <li id="3" class="blocks__block"></li>
      <li id="4" class="blocks__block"></li>
      <li id="5" class="blocks__block"></li>
      <li id="6" class="blocks__block"></li>
    </ul>
<!------------------------------------------
- BLOCK TITLES
------------------------------------------->
    <ul class="blocks-names">
      <li class="blocks__name">Tab 1</li>
      <li class="blocks__name">Tab 2</li>
      <li class="blocks__name">Tab 3</li>
      <li class="blocks__name">Tab 4</li>
      <li class="blocks__name">Tab 5</li>
      <li class="blocks__name">Tab 6</li>
    </ul>
<!------------------------------------------
- BLOCK CONTENT SECTIONS
------------------------------------------->
    <ul class="blocks-content">
      <li class="blocks-content__content">
        <div class="content__close"></div>
        <h2>Tab 1</h2>
        <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.</p><i class="blocks__content-close-dark fa fa-close"></i>
      </li>
      <li class="blocks-content__content">
        <h2>Tab 2</h2>
        <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?</p><i class="blocks__content-close-dark fa fa-close"></i>
      </li>
      <li class="blocks-content__content">
        <h2>Tab 3</h2>
        <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.</p><i class="blocks__content-close-dark fa fa-close"></i>
      </li>
      <li class="blocks-content__content">
        <h2>Tab 4</h2>
        <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.</p><i class="blocks__content-close-light fa fa-close"></i>
      </li>
      <li class="blocks-content__content">
        <h2>Tab 5</h2>
        <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.</p><i class="blocks__content-close-light fa fa-close"></i>
      </li>
      <li class="blocks-content__content">
        <h2>Tab 6</h2>
        <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.</p><i class="blocks__content-close-light fa fa-close"></i>
      </li>
    </ul>
</div>

            
          
!
            
              /*------------------------------------------
- GENERAL 
------------------------------------------*/
* {
  box-sizing: border-box;
  
}
body {
  font-family: "Roboto";
  font-weight: 200;
  text-align: center;
}

#container {
  height: 80vh;
  width: 90vw;
  top: 10vh;
  left: 5vw;
  position: relative;
  visibility: visible;
}

/*------------------------------------------
- INITIAL CONTENT // displays before block is selected
------------------------------------------*/
initial {
  position: absolute;
  z-index: 0;
  padding: 3vh 5vw;
  height: 100%;
  width: 100%;
  top: 0%;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  background: #fff;
}
initial h1 {
  margin: 0;
  font-weight: 200;
  color: #38c5b9;
}
initial h1 a {
  font-size: 8vmin;
}
initial p {
  font-weight: 100;
  font-size: 4vmin;
  max-width: 50vw;
  margin: 7px auto;
}
initial a {
  text-decoration: none;
  color: #2093d1;
  font-size: 4vmin;
}
/*------------------------------------------
- BLOCKS // alignment, size
------------------------------------------*/
.blocks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 100.05%;
  height: 100.5%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.blocks__block {
  will-change: transform;
  position: relative;
  height: 15%;
  width: 100%;
  flex: 1;
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.blocks__block:hover {opacity:.9;}
.blocks__block.active {
  z-index: 2;
}
/*------------------------------------------
- BLOCKS // individual block background color & transform origin 
------------------------------------------*/
.blocks__block:nth-child(1) {background: #E1F5FE; transform-origin: 0% 0%;}
.blocks__block:nth-child(2) {background: #81D4FA; transform-origin: 20% 0%;}
.blocks__block:nth-child(3) {background: #29B6F6; transform-origin: 40% 0%;}
.blocks__block:nth-child(4) {background: #03A9F4; transform-origin: 60% 0%;}
.blocks__block:nth-child(5) {background: #0288D1; transform-origin: 80% 0%;}
.blocks__block:nth-child(6) {background:#01579B; transform-origin: 100% 0%;}
/*------------------------------------------
- BLOCK TITLE // alignment
------------------------------------------*/
.blocks-names {
  position: absolute;
  top: 0;
  z-index: 2;
  height: 100%;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  font-size: 3.5vmin;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.15s ease-out;
}
.blocks-names .blocks__name {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  align-content: space-between;
  height: 15%;

}
.blocks-names .blocks__name:hover {
  background: rgba(255,255,255,.25);
  -webkit-transition: all .2s ease-out; 
     -moz-transition: all .2s ease-out; 
       -o-transition: all .2s ease-out; 
          transition: all .2s ease-out;}
/*------------------------------------------
- BLOCK TITLE 
------------------------------------------*/
.blocks-names .blocks__name:nth-child(-n+3){}
.blocks-names .blocks__name:nth-child(n+4):nth-child(-n+6) {color: #fff;}
     /* //if you want individual control
    .blocks-names .blocks__name:nth-child(1) {}
    .blocks-names .blocks__name:nth-child(2) {}
    .blocks-names .blocks__name:nth-child(3) {}
    .blocks-names .blocks__name:nth-child(4) {color: #fff;}
    .blocks-names .blocks__name:nth-child(5) {color: #fff;}
    .blocks-names .blocks__name:nth-child(6) {color: #fff;}
    */
/*------------------------------------------
- BLOCK CONTENT // positioning & transform 
------------------------------------------*/
.blocks-content {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
}
.blocks-content__content {
  will-change: transform, opacity;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 3;
  bottom: 7.5%;
  left: 0;
  right: 0;
  padding: 5%;
  font-size: 4vmin;
  opacity: 0;
  visibility: hidden;
  text-align: center;
  transform: scale(0.9);
  transition: all 0.3s 0.2s ease-out;
}
.blocks-content__content.active {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
/*------------------------------------------
- BLOCK CONTENT // individual block control
------------------------------------------*/
.blocks-content .blocks-content__content:nth-child(-n+3){}
.blocks-content .blocks-content__content:nth-child(n+4):nth-child(-n+6) {color: #fff;}
    /* //if you want individual control
    .blocks-content .blocks-content__content:nth-child(1) {}
    .blocks-content .blocks-content__content:nth-child(2) {}
    .blocks-content .blocks-content__content:nth-child(3) {}
    .blocks-content .blocks-content__content:nth-child(4) {color: #fff;}
    .blocks-content .blocks-content__content:nth-child(5) {color: #fff;}
    .blocks-content .blocks-content__content:nth-child(6) {color: #fff;}
    */
/*------------------------------------------
- BLOCK CONTENT // close 'button' 
------------------------------------------*/
.blocks-content .blocks__content-close-dark {
  position: fixed;
  background: transparent;
  width: 7.5vmin;
  height: 7.5vmin;
  line-height: 7.5vmin;
  right: 49%;
  bottom: 5%;
  font-size: 5vmin;
  cursor: pointer;
  outline: none;
  border-radius: 50%;
  transition: all 0.2s ease-out;
}
.blocks-content .blocks__content-close-light {
  position: fixed;
  background: transparent;
  width: 7.5vmin;
  height: 7.5vmin;
  line-height: 7.5vmin;
  right: 49%;
  bottom: 5%;
  font-size: 5vmin;
  cursor: pointer;
  outline: none;
  border-radius: 50%;
  transition: all 0.2s ease-out;
}
.blocks-content .blocks__content-close-dark:hover {
  background: rgba(0,0,0,.25);
  transform: scale(1.1);
}
.blocks-content .blocks__content-close-light:hover {
  background: rgba(255,255,255,.25);
  transform: scale(1.1);
}
/*------------------------------------------
- BLOCK CONTENT 
------------------------------------------*/
.blocks-content h2 {
  padding: 4vmin;
  font-weight: 200;
  letter-spacing: 6px;
}
.blocks-content p {
  font-size: 1em;
  line-height: 1.75;
  width: 90%;
  left: 5%;
}

/*------------------------------------------
- MD PAPER-SHADOW ATTRIBUTES - *MaterializeCSS Spec*
------------------------------------------*/ 
.z-depth-1, .blocks-content {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
.z-depth-1-half, .container {
  -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); }
.z-depth-2, .blocks__name:hover {
  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
.z-depth-3, .blocks__block.active {
  -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); }
.z-depth-4 {
  -webkit-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
  -moz-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21); }
.z-depth-5 {
  -webkit-box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
  -moz-box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22); }
            
          
!
            
              var bHeight, bWidth, block, bname, closeBtn, closeContent, content, expand, openContent, updateValues, container, cHeight, cWidth, xVal, yVal;
container = $('#container');
block = $('.blocks__block');
bname = $('.blocks__name');
content = $('.blocks-content__content');
closeBtn = $('.blocks__content-close-dark, .blocks__content-close-light');
cHeight = container.height();
cWidth = container.width();
bHeight = block.height();
bWidth = block.width();
xVal = Math.round(cWidth / bWidth) + 0.03;
yVal = cHeight / bHeight + 0.03;
expand = function() {
    var aBlock, num;
    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);
    }
};
openContent = function(num) {
    var aContent;
    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');
};
closeContent = function() {
    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');
};
updateValues = function() {
    var yVal;
    var xVal;
    var bWidth;
    var bHeight;
    var cWidth;
    var cHeight;
    var aBlock;
    if (block.hasClass('active')) {
        aBlock = $('.blocks__block.active');
        cHeight = container.height();
        cWidth = container.width();
        bHeight = block.height();
        bWidth = block.width();
        xVal = Math.round(cWidth / bWidth) + 0.03;
        yVal = cHeight / bHeight + 0.03;
        aBlock.css({
            'transform': 'scale(' + xVal + ',' + yVal + ')',
            '-webkit-transform': 'scale(' + xVal + ',' + yVal + ')'
        });
    }
};

container.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