JSFiddle - React, Tailwind, and code Playground

DROP PÁGINA PRINCIPAL

by Yolanda Robles

HTML

<div class="titulo titulo1">
</div>


<div class="grid">
  <a class="item item1" href="#">
    <div class="imagen"></div>
    <div class="item-hover">
        <h3>
          TÍTULO
        </h3>
    </div>
  </a>
  <a class="item item2" href="#">
    <div class="imagen2"></div>
    <div class="item-hover">
        <h3>
          TÍTULO
        </h3>
    </div>
  </a>
  <a class="item item3" href="#">
    <div class="imagen2"></div>
    <div class="item-hover">
        <h3>
          TÍTULO
        </h3>
    </div>
  </a>
  <a class="item item4" href="#">
    <div class="imagen"></div>
    <div class="item-hover">
        <h3>
          TÍTULO
        </h3>
    </div>
  </a>
</div>

CSS

body{
  background: #47028F;
  overflow-x: hidden;
}

.titulo{
  position: relative;
  background-color: #111;
  width: 100%;
  height: 170px;
  -o-transform: skewY(10deg);
  transform: skewY(10deg);
  
}

.titulo1{
  top: 150px;
}


.grid{
  position: relative;
  height: 400px;
  top: 150px;
  background: white;
  display: flex;
  flex-wrap: wrap;
  -o-transform: skewY(10deg);
    transform: skewY(10deg);
}

.item{
  flex: 0 49%;
  border: 5px solid red;
  position: relative;
}


.imagen{
  background: url('http://www.panicstudio.tv/assets-user/misc/BASE_WORKS__1.jpg');
  width:100%;
  height:100%;
  background-size: cover;
}

.imagen2{
  background: url('http://www.panicstudio.tv/assets-user/misc/thumbnail__1.jpg');
  width:100%;
  height:100%;
  background-size: cover;
}

.item-hover{
  height:100%;
  width:100%;
  background: #dadada;
  position:absolute;
  top:0;
  left:0;
  opacity: 0;
  
}

.item:hover .item-hover{
  opacity: 0.5;
}

h3{
  position: absolute;
  top: 40px;
  left: 40px;
  -o-transform: skewY(-10deg);
    transform: skewY(-10deg);
}