- tileCount = 12
- i = 0

cs-app
   cs-title CONNECTED ANIMATION
   cs-tiles
      - while(i++ < tileCount)
         input(type='checkbox' id='demo-'+i)
         cs-tile-container
            cs-tile
               label.cs-open(for='demo-'+i)
               label.cs-close(for='demo-'+i) +
               cs-text demo #{i}
               cs-content demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text.
View Compiled
html, body{
   padding:0px;
   margin:0px;
   background:#222;
   font-family: 'Arvo', sans-serif;
   color:#FFF;
   height:100%;
}

body{ display:flex; padding:10px; }

$tilecount: 12;
$tileWidth:33.334%;
$tileHeight:85px;
$appWidth:450px;
$padding: 10px;
$columns: 3;

cs-app, cs-app * {
   box-sizing:border-box;
   border:none; background:transparent;
   padding:0; margin:0;
   display:block;
}

cs-app {
   margin:auto;
   width:100%;
   max-width:$appWidth;
   
   cs-title {
      text-align:center;
      margin-bottom:10px;
      font-size:21px;
   }
   
   cs-tiles {
      height: ceil($tilecount/$columns) * ($tileHeight + 1);
      position:relative;
         
      input {
         display:none;
      }
   
      // global  
      cs-tile-container {
         display:flex;  
         position:absolute;
         height:$tileHeight;
         transform:translateX(-50%);
         transition:all 0.15s 0.15s;
         z-index:1000;
         cs-tile {
            background:#36f;
            margin:auto;
            width:90%;
            height:80%;
            border-radius:2px;
            user-select:none;
            position:relative;
            transition:all 0.15s 0.15s, background 0.15s;
            
            &:hover {
               box-shadow:0px 3px 10px rgba(0, 0, 0, 0.75);
               background:lighten(#36f, 10);
            }
            
            cs-text { 
               transition:all 0.15s 0.15s; 
               width:100%;
               text-align:center;
               line-height:70px;
               white-space:nowrap;
               text-transform:uppercase;
            }
            
            cs-content { 
               transition:all 0.15s, max-height 0s; 
               opacity:0; 
               pointer-events:none; 
               overflow:hidden;
               max-height:0;
            }         
            
            .cs-open {
               cursor:pointer;
               position:absolute;
               width:100%; height:100%;
               top:0; left:0;
            }
            
            .cs-close {
               // you could have reused the open and clsoe together.
               // sorry didn't notice until later! :]
               cursor:pointer;
               transition:all 0.15s;
               position: absolute;
               opacity:0;
               top: 25px; right: 25px;
               transform: rotateZ(45deg) translateX(-50%) translateY(-50%);
               font-size: 25px;
            }
         }     
      }
      
      // open
      input:checked + cs-tile-container {
         transition:all 0.25s;
         width:100%; height:100%;
         left:50%; top:50%;
         transform:translateX(-50%) translateY(-50%);
         z-index:10000;
         cs-tile {
            transition:all 0.25s;
            background:#3b3;
            height:80%; width:80%;
            display:flex;
            flex-direction:column;
            padding:20px;
            
            box-shadow:0px 0px 20px rgba(0, 0, 0, 0.5);
            &:hover { cursor:initial; }
            .cs-open {
               display:none;
            }
            
            .cs-close {
               transition:all 0.15s 0.25s;
               opacity:1;
               &:hover { transition:all 0.15s; opacity: 0.5; }
            }
            
            cs-text {
               transition:all 0.15s 0.25s;
               font-size:24px;
               line-height:50px;
            }
            
            cs-content {
               flex:1;
               transition:all 0.25s 0.4s, max-height 0s 0.4s, flex 0s 0.4s;
               opacity:1;
               margin-top:10px;
               pointer-events:initial;
               width:100%;
               max-height:1000000px;
               overflow:hidden;
            }
         }
      }
   }
   
   // specific
   // this is what css only makes you do
   // miss you my friend... javascript <3
   @for $i from 1 through $tilecount {
      $x: ($i - 1) % $columns;
      $y: floor(($i - 1) / $columns);

      cs-tile-container:nth-of-type(#{$i}) {
         // you have to be doing something wrong here
         $first: $x == 1; $last: $x == $columns;
         $firstOrLast: if($first, if($last, $x - 1, $x), 1);
         
         left: calc(#{$x} * #{$tileWidth} + #{$firstOrLast} * #{$tileWidth/2});
         top: calc(#{$y} * #{$tileHeight});
         width: $tileWidth;
      } 
   }
}
View Compiled
// demo or it did not happen

var demo1 = document.querySelector('#demo-1')
var demo2 = document.querySelector('#demo-2')

setTimeout(() => { demo1.checked = true }, 500)
setTimeout(() => { demo1.checked = false}, 1500)
setTimeout(() => { demo2.checked = true }, 2000)
setTimeout(() => { demo2.checked = false}, 3000)

External CSS

  1. https://fonts.googleapis.com/css?family=Arvo
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css

External JavaScript

This Pen doesn't use any external JavaScript resources.