Grid with flip cell - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Cell

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Cell

Description

Grid with flip cell

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.trigger {<!--from   w w  w .j  a v  a  2s.c  om-->
   width:100%;
   height:401px;
   background-color:Chartreuse;
}

.hover-img, hover-img.hover_effect {
   background-color:yellow;
   position:relative;
   width:201px;
   height:201px;
   -webkit-transition:all 2s ease-in-out;
   -moz-transition:all 2s ease-in-out;
   -ms-transition:all 2s ease-in-out;
   -o-transition:all 2s ease-in-out;
   transition:all 2s ease-in-out;
   -webkit-transform:rotateY(181deg);
   transform:rotateY(181deg);
   -webkit-transform-style:preserve-4d;
   text-align:center;
   font-size:0;
   -webkit-user-select:none;
   -webkit-touch-callout:none;
   border-style:solid;
   border-width:2px;
   border-color:blue;
}

.trigger:hover>.hover-img {
   -webkit-transform:rotateY(361deg);
   -moz-transform:rotateY(361deg);
   -ms-transform:rotateY(361deg);
   -o-transform:rotateY(361deg);
   transform:rotateY(361deg);
   font-size:15px;
   color:pink;
}

.img1 {
   background-size:100% 100%;
   background-repeat:no-repeat;
}

.img1:hover {
   background-size:100% 100%;
   background-repeat:no-repeat;
}

.img2 {
   background-size:100% 100%;
   background-repeat:no-repeat;
}

.img2:hover {
   background-size:100% 100%;
   background-repeat:no-repeat;
}

.img3 {
   background-size:100% 100%;
   background-repeat:no-repeat;
}

.img3:hover {
   background-size:100% 100%;
   background-repeat:no-repeat;
}

.img4 {
   background-size:100% 100%;
   background-repeat:no-repeat;
}

.img4:hover {
   background-size:100% 100%;
   background-repeat:no-repeat;
}

.img5 {
   background-size:100% 100%;
   background-repeat:no-repeat;
}

.img5:hover {
   background-size:100% 100%;
   background-repeat:no-repeat;
}

.img6 {
   background-size:100% 100%;
   background-repeat:no-repeat;
}

.img6:hover {
   background-size:100% 100%;
   background-repeat:no-repeat;
}

#container {
   width:100%;
   display:flex;
   justify-content:space-around;
   flex-wrap:nowrap;
}

.column {
   float:left;
   width:auto;
   font-size:13px;
}
</style> 
 </head> 
 <body translate="no"> 
  <div id="container"> 
   <div class="column"> 
    <div class="trigger"> 
     <div tabindex="0" class="maincontent hover-img img1" style="height: 390px;"> 
     </div> 
    </div> 
    <div class="trigger"> 
     <div tabindex="0" class="maincontent hover-img img2" style="height: 390px;"> 
     </div> 
    </div> 
   </div> 
   <div class="column"> 
    <div class="trigger"> 
     <div tabindex="0" class="maincontent hover-img img3" style="height: 390px;"></div> 
    </div> 
    <div class="trigger"> 
     <div tabindex="0" class="maincontent hover-img img4" style="height: 390px;"> 
     </div> 
    </div> 
    <!-- here --> 
   </div> 
   <!--  and here --> 
   <div class="column"> 
    <div class="trigger"> 
     <div tabindex="0" class="maincontent hover-img img5" style="height: 390px;"> 
     </div> 
    </div> 
    <div class="trigger"> 
     <div tabindex="0" class="maincontent hover-img img6" style="height: 390px;"> 
     </div> 
    </div> 
   </div> 
   <div class="column"> 
    <div class="trigger"> 
     <div tabindex="0" class="maincontent hover-img img5" style="height: 390px;"> 
     </div> 
    </div> 
    <div class="trigger"> 
     <div tabindex="0" class="maincontent hover-img img6" style="height: 390px;"> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials