<div class="container">
  
  <div class="box">
    <div class="content">
      <div class="tape"></div>
      <h2>01</h2>
      <h3>Service One</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat neque nesciunt possimus eveniet eius assumenda ipsa modi distinctio, sunt earum voluptatem inventore in vel odio adipisci explicabo sint quibusdam nisi!</p>
      <a href="#">Read more...</a>
    </div>
  </div>
  
  
  <div class="box">
    <div class="content">
      <div class="tape"></div>
      <h2>02</h2>
      <h3>Service Two</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat neque nesciunt possimus eveniet eius assumenda ipsa modi distinctio, sunt earum voluptatem inventore in vel odio adipisci explicabo sint quibusdam nisi!</p>
      <a href="#">Read more...</a>
    </div>
  </div>
  
  
  
  <div class="box">
    <div class="content">
      <div class="tape"></div>
      <h2>03</h2>
      <h3>Service Three</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat neque nesciunt possimus eveniet eius assumenda ipsa modi distinctio, sunt earum voluptatem inventore in vel odio adipisci explicabo sint quibusdam nisi!</p>
      <a href="#">Read more...</a>
    </div>
  </div>
  
  
  
  <div class="box">
    <div class="content">
      <div class="tape"></div>
      <h2>04</h2>
      <h3>Service Four</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat neque nesciunt possimus eveniet eius assumenda ipsa modi distinctio, sunt earum voluptatem inventore in vel odio adipisci explicabo sint quibusdam nisi!</p>
      <a href="#">Read more...</a>
    </div>
  </div>
  
  
  
</div>
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
body{
  font-family: 'Poppins', sans-serif;
  
  margin:0;
  padding:0;
  
  display:flex;
  justify-content:center;
  align-items:center;
  
  min-height: 100vh;
  
  background: #060c21;
  color:#FFF;
  /*
  background: #DEDEDE;
  color:#000;
  */
}

.container{
  position: relative;
  width:90%;
  
  display:grid;
  grid-template-columns: repeat(auto-fill , minmax(20%, 1fr));
  grid-template-rows: auto;
  grid-gap:0 40px;
}

.container .box {
  position:relative;
  height:auto;
  padding:0px;
  background:rgba(255,255,255,0.0);
  
  
  display:flex;
  justify-content:center;
  align-items:center;
  
  border: 1px solid #000;
  /*
  border: 1px solid #DEDEDE;
  */
  /*overflow:hidden;*/
}

.box .content { 
  position:relative;  
  padding:100px 20px;
  background: #060c21;
  color:#FFF;
  /*
  background: #DEDEDE;
  colot:#000;
  */
  
}
.container .box:before {
  content:'';
  position:absolute;
  top:-2px;
  left:-2px;
  bottom:-2px;
  right:-2px;
  /*background:rgba(255,255,255,1);*/
  background:#FFF;  
  transform: skew(2deg,2deg);
  z-index:-1;
}

.container .box:nth-child(1):before {
  background:yellow;
  background: linear-gradient(315deg, #ff0057,#e64a19)
}
.container .box:nth-child(1):hover:before {
  /*z-index:1;*/ /*example*/
}

.container .box:nth-child(2):before {
  background:red;
  background: linear-gradient(315deg, #59A600,#008A9C)
}

.container .box:nth-child(2):hover:before {  
  background: linear-gradient(315deg, #89ff00,#00E2FF)
}

.container .box:nth-child(3):before {
  background:lime;
  background: linear-gradient(315deg, #e91e63,#5d02ff)
}

.container .box:nth-child(4):before {
  background:blue;
  background: linear-gradient(315deg, #ff0000,#ffc107)
}


/*.container .box:after{*/
.container .tape{
  overflow:hidden;
  position:absolute;
  top:0;
  left:0;  
  width:100%;
  height:100%;
  background:rgba(255,255,0,0.0);   
}
.container .tape:after{
  content: '';
  position:absolute;
  top:0;
  left:0;  
  height:100%;
  width:50%;
  margin-left:25%;
  background: rgba(255,255,255,0.03);
  background: rgba(0,0,0,0.1);
  pointer-events:none;  
  transform:skew(41deg);
  overflow:hidden;
  transition:0.25s; /* 0.5 0.75*/
}

.box:hover .tape:after{
  width:100%;
  margin-left:0%;
  transform:skew(0deg);  /*180 0 360 -180 +135 -135*/
 
}

.box .content h2{
  position:absolute;
  top:-30px;
  right:20px;
  margin:0;
  padding:0;
  font-size:10em;
  color:rgba(255,255,255,0.05);
  /*color:#000;*/
  transition: 0.25s;
}

.box:hover .content h2{ 
  top:-50px;  
  color:rgba(255,255,255,0.15);
  /*color:rgba(0,0,0,0.25);*/
}

.box .content h3{ 
  margin: 0 0 10px;
  padding:0;
  font-size:24px;
  font-weight:bold;
}

.box .content p{ 
  margin:0;
  padding:0;
  color:#DEDEDE;
  /*color:#333;*/
  font-size:16px;
}

.box .content a{ 
  position: relative;
  margin:20px 0 0 0;
  padding:10px 20px;
  text-decoration:none;
  border: 1px solid #fff;
  color: #FFF;
  /*color:#333;*/
  display:inline-block;
  transition: 0.5s;
  visibility:hidden;
  transform: translateY(10px);
  opacity:0;
}

.box:hover .content a{ 
  visibility:visible;
  opacity:1;
  transform: translateY(0px);
}

.box .content a:hover{ 
  background:rgba(255,255,255,0.95);  
  color:#222;
  /*
  color:#DEDEDE;
  background:rgba(0,0,0,0.75);
  */
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.