CSS Grid Hover Responsive - Tutorial Website | Tutorial PHP & MYSQL | Boostsrap | Ajax Javascript

Ditutorial kali ini masih membahas seputar masalah css dan grid dengan judul CSS Grid Hover Responsive, langsung saja tanpa basa basi kita menuju kodingannya, dibawah ini koding CSS nya silakan anda copas kedalam lembar kerja anda

Step 1

<style class="cp-pen-styles">body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

h1, h2, h3, h4, h5, h6, p{
  color: #fff;
  font-weight: 200;
}

a{
  text-decoration: none;
}

/* GRID */

.grid { max-width: 940px; width: 100%; margin: 0 auto; }

.four { 
 width: 32.26%; 
}

/* COLUMNS */

.col {
  display: block;
  float:left;
  margin: 1% 0 1% 1.6%;
}

.col:first-of-type { margin-left: 0; }

/* CLEARFIX */

.cf:before,
.cf:after {
    content: " ";
    display: table; 
}

.cf:after { clear: both; }
.cf { *zoom: 1; }

/* GENERAL STYLES FOR BOX AND OVERLAY */

.box {
  display: block;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: #bbb;
  text-align: center;
  position: relative;
}

.overlay{
  width: 100%;
  height:100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

/* SLIDE IN */

.slide-in .overlay{
  background-color: #6addaa;
  line-height: 200px;
  color: #fff;
  transform: translateX(-100%);
  -webkit-transition: transform 0.5s ease-out;
  -o-transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
}

.slide-in .box:hover .overlay{
  transform: translateX(0);
}

/* SLIDE UP */

.slide-up .overlay{
  background-color: #3dcbe8;
  line-height: 200px;
  color: #fff;
  transform: translateY(100%);
  -webkit-transition: transform 0.5s ease-out;
  -o-transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
}

.slide-up .box:hover .overlay{
  transform: translateY(0);
}

/* SLIDE DOWN DELAY */

.slide-down-delay .overlay{
  background-color: #ee6f8c;
  line-height: 200px;
  color: #fff;
  transform: translateY(-100%);
  -webkit-transition: transform 0.5s ease-out;
  -o-transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
}

.slide-down-delay .box:hover .overlay{
  transform: translateY(0);
}

.slide-down-delay .overlay i{
  transform: translateY(-80%);
  opacity: 0;
  -webkit-transition: transform 0.5s linear, opacity 0.5s linear 0.5s;
  -o-transition: transform 0.5s linear, opacity 0.5s linear 0.5s;
  transition: transform 0.5s linear, opacity 0.5s linear 0.5s;
}

.slide-down-delay .box:hover .overlay i{
  transform: translateY(0);
  opacity: 1;
}

/* ROTATE */

.rotate .overlay{
  background-color: #6d94bb;
  line-height: 200px;
  color: #fff;
  transform-origin: 0 0;
  transform: rotate(90deg);
  -webkit-transition: transform 0.5s ease-in-out;
  -o-transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
}

.rotate .box:hover .overlay{
  transform: rotate(0deg);
}

/* SCALE */

.scale .overlay{
  background-color: #efcb5e;
  line-height: 200px;
  color: #fff;
  transform: translateX(210%) scale(3);
  -webkit-transition: transform 0.6s ease-in-out;
  -o-transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
}

.scale .box:hover .overlay{
  transform: translateX(0) scale(1);
}

/* FLIP */

.flip .overlay{
  background-color: #009688;
  line-height: 200px;
  color: #fff;
  opacity: 0;
  transform: rotateY(180deg);
  -webkit-transition: transform 0.6s ease-in-out 0.3s, opacity 0.3s ease-in-out;
  -o-transition: transform 0.6s ease-in-out 0.3s, opacity 0.3s ease-in-out;
  transition: transform 0.6s ease-in-out 0.3s, opacity 0.3s ease-in-out;
}

.flip .box:hover .overlay{
  opacity: 1;
  transform: rotateY(0deg);
}

/* SKEW */

.skew .overlay{
  background-color: #f44336;
  line-height: 200px;
  color: #fff;
  opacity: 0;
  transform: skewX(-10deg);
  -webkit-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.skew .box:hover .overlay{
  transform: skewX(0deg);
  opacity: 1;
}

/* CORNER */

.corner-bottom .overlay{
  background-color: #9c27b0;
  line-height: 200px;
  color: #fff;
  transform: translate(100%, 100%);
  -webkit-transition: transform 0.4s ease-in-out;
  -o-transition: transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
}

.corner-bottom .box:hover .overlay{
   transform: translate(0, 0);
}

/* CORNER */

.corner-top .overlay{
  background-color: #ff5722;
  line-height: 200px;
  color: #fff;
  transform: translate(-100%, -100%);
  -webkit-transition: transform 0.4s ease-in-out;
  -o-transition: transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
}

.corner-top .box:hover .overlay{
   transform: translate(0, 0);
}</style>

Step 2
Untuk kode HTML nya bisa anda copas dibawah ini :

<div class="grid">
  <div class="row cf">
   <div class="slide-in four col">
    <div class="box">
     <span class="original">
      <h1>Hover!</h1>
      <p>Slide in from left</p>
     </span>
     <div class="overlay">
      <i class="fa fa-commenting-o fa-3x" aria-hidden="true"></i>
     </div>
    </div>
   </div>
   <div class="slide-up four col">
    <div class="box">
     <span class="original">
      <h1>Hover!</h1>
      <p>Slide up</p>
     </span>
     <div class="overlay">
      <i class="fa fa-cogs fa-3x" aria-hidden="true"></i>
     </div>
    </div>
   </div>
   <div class="slide-down-delay four col">
    <div class="box">
     <span class="original">
      <h1>Hover!</h1>
      <p>Slide down with icon delay</p>
     </span>
     <div class="overlay">
      <i class="fa fa-users fa-3x" aria-hidden="true"></i>
     </div>
    </div>
   </div>
  </div>
  <div class="row cf">
   <div class="rotate four col">
    <div class="box">
     <span class="original">
      <h1>Hover!</h1>
      <p>Rotate into view</p>
     </span>
     <div class="overlay">
      <i class="fa fa-star fa-3x" aria-hidden="true"></i>
     </div>
    </div>
   </div>
   <div class="scale four col">
    <div class="box">
     <span class="original">
      <h1>Hover!</h1>
      <p>Slide in from right and scale</p>
     </span>
     <div class="overlay">
      <i class="fa fa-trophy fa-3x" aria-hidden="true"></i>
     </div>
    </div>
   </div>
   <div class="flip four col">
    <div class="box">
     <span class="original">
      <h1>Hover!</h1>
      <p>Fade in then flip</p>
     </span>
     <div class="overlay">
      <i class="fa fa-thumbs-up fa-3x" aria-hidden="true"></i>
     </div>
    </div>
   </div>
  </div>
  <div class="row cf">
   <div class="skew four col">
    <div class="box">
     <span class="original">
      <h1>Hover!</h1>
      <p>Fade in and skew</p>
     </span>
     <div class="overlay">
      <i class="fa fa-rocket fa-3x" aria-hidden="true"></i>
     </div>
    </div>
   </div>
   <div class="corner-bottom four col">
    <div class="box">
     <span class="original">
      <h1>Hover!</h1>
      <p>Slide in from bottom corner</p>
     </span>
     <div class="overlay">
      <i class="fa fa-coffee fa-3x" aria-hidden="true"></i>
     </div>
    </div>
   </div>
   <div class="corner-top four col">
    <div class="box">
     <span class="original">
      <h1>Hover!</h1>
      <p>Slide in from top corner</p>
     </span>
     <div class="overlay">
      <i class="fa fa-calendar fa-3x" aria-hidden="true"></i>
     </div>
    </div>
   </div>
  </div>
 </div>

 Untuk bootstrapnya silakan anda download di situs resminya bootstrap download free, semoga tutorial cara membuat CSS Grid Hover Responsive bisa membantu dan bermanfaat. Baca juga : Membuat halaman AMP HTML pertama