Combining CSS Grid with transform - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Transform

  1. HOME
  2. HTML CSS
  3. CSS Animation
  4. Transform

Description

Combining CSS Grid with transform

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.grid-wrapper {<!-- ww  w.  jav  a2s  .co  m-->
   display:inline-grid;
   grid-template-columns:repeat(6, 51px);
   grid-template-rows:repeat(4, 51px);
   grid-auto-rows:51px;
   grid-auto-columns:51px;
   grid-gap:11px;
   padding:11px;
   border:2px solid Chartreuse;
}

.grid-wrapper:hover {
   grid-auto-flow:dense;
}

.a, .h {
   grid-column-end:span 3;
}

.b, .e {
   grid-row-end:span 3;
}

.f {
   grid-row-end:span 3;
   grid-column-end:span 3;
}

.box {
   background-color:yellow;
   display:flex;
   align-items:center;
   justify-content:center;
   text-align:center;
}

.grid-wrapper:hover .g,
.grid-wrapper:hover .h {
   background-color:blue;
}
</style> 
 </head> 
 <body> 
  <div class="grid-wrapper"> 
   <div class="box a">
     Lor 
   </div> 
   <div class="box b">
     Lor 
   </div> 
   <div class="box c">
     Lor 
   </div> 
   <div class="box d">
     Lor 
   </div> 
   <div class="box e">
     Lor 
   </div> 
   <div class="box f">
     Lor 
   </div> 
   <div class="box g">
     Lor 
   </div> 
   <div class="box h">
     Lor 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials