Cuadros

Tutorials of (Cuadros) by Angel naranjo

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Cuadros</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <link rel="stylesheet" href="http://spwest/sites/lahr/MX/FAQ/Shared%20Documents/cuadros."> 
<div class="metro">
  <div class="md pull-left uno">
    <div class="seeallmd"><h1><a href="https://www.google.com/?gws_rd=ssl">+</a></h1></div>
    <div class="content-uno"></div>
  </div>
  <div class="lg pull-right cinco">
    <div class="seealllg"><h1><a href="https://www.google.com/?gws_rd=ssl">+</a></h1></div>
    <div class="content-cinco"></div>
  </div>
  <div class="sm pull-right tres">
    <div class="seeallsm"><h1><a href="https://www.google.com/?gws_rd=ssl">+</a></h1></div>
    <div class="content-tres"></div>
  </div>
  <div class="sm pull-left cuatro">
    <div class="seeallsm"><h1><a href="https://www.google.com/?gws_rd=ssl">+</a></h1></div>
    <div class="content-cuatro"></div>
  </div>
  <div class="md pull-left dos">
    <div class="seeallmd"><h1><a href="https://www.google.com/?gws_rd=ssl">+</a></h1></div>
    <div class="content-dos"></div>
  </div>
  <div class="md pull-right siete">
    <div class="seeallmd"><h1><a href="https://www.google.com/?gws_rd=ssl">+</a></h1></div>
    <div class="content-siete"></div>
  </div>
  <div class="lg pull-left seis">
    <div class="seealllg"><h1><a href="https://www.google.com/?gws_rd=ssl">+</a></h1></div>
    <div class="content-seis"></div>
  </div>
  <div class="sm pull-right nueve">
    <div class="seeallsm"><h1><a href="https://www.google.com/?gws_rd=ssl">+</a></h1></div>
    <div class="content-nueve"></div>
  </div>
  <div class="sm pull-right d10">
    <div class="seeallsm"><h1><a href="https://www.google.com/?gws_rd=ssl">+</a></h1></div>
    <div class="content-d10"></div>
  </div>
  <div class="md pull-left ocho">
    <div class="seeallmd"><h1><a href="https://www.google.com/?gws_rd=ssl">+</a></h1></div>
    <div class="content-ocho"></div>
  </div>
  <div class="md pull-left d13">
    <div class="seeallmd"><h1><a href="https://www.google.com/?gws_rd=ssl">+</a></h1></div>
    <div class="content-d13"></div>
  </div>
  <div class="md pull-left d15">
    <div class="seeallmd"><h1><a href="https://www.google.com/?gws_rd=ssl">+</a></h1></div>
    <div class="content-d15"></div>
  </div>
  <div class="sm pull-left d11">
    <div class="seeallsm"><h1><a href="https://www.google.com/?gws_rd=ssl">+</a></h1></div>
    <div class="content-d11"></div>
  </div>
  
</div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
a:link   
{   
 text-decoration:none;   
}   
.metro {
  width: 910px;
  margin: 0 auto;
  
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.sm {
  position: relative;
  width: 150px;
  height: 150px;
  background: #111;
  margin: 5px;
  overflow: hidden;
  border: 5px solid #000;
}

.md {
  position: relative;
  width: 300px;
  height: 150px;
  background: #111;
  margin: 5px;
  overflow: hidden;
  border: 5px solid #000;
}

.lg {
  position: relative;
  width: 400px;
  height: 320px;
  background: #11;
  margin: 5px;
  overflow: hidden;
  border: 5px solid #000;
}

.seeallmd {
  width: 100px;
  height: 150px;
  background: #fff;
  position: absolute;
  right: -100px;
  transition: all 1s;
  z-index: 100;
}

.seeallmd h1 {
  font-size: 4em;
  text-align: center;
  margin-top: 10px;
}

.seeallsm {
  width: 150px;
  height: 50px;
  background: #fff;
  position: absolute;
  bottom: -50px;
  transition: all 1s;
  z-index: 100;
}

.seeallsm h1 {
  font-size: 3em;
  text-align: center;
  margin-top: -10px;
}

.seealllg {
  width: 400px;
  height: 100px;
  background: #fff;
  position: absolute;
  top: -100px;
  transition: all 1s;
  z-index: 100;
}

.seealllg h1 {
  font-size: 6em;
  text-align: center;
  margin-top: -20px;
}

.content-uno {
  position: relative;
  left: 0;
  height: 150px;
  width: 300px;
  background: url(http://spwest/sites/lahr/MX/Menu%20Compensaciones/04_.jpg) no-repeat center;
  background-size: cover;
  transition: all 1s;
  z-index: 50;
}

.content-dos {
  position: relative;
  left: 0;
  height: 150px;
  width: 300px;
  background: url(http://spwest/sites/lahr/MX/Menu%20Compensaciones/01_.jpg) no-repeat center;
  background-size: cover;
  transition: all 1s;
  z-index: 50;
}

.content-tres {
  position: relative;
  top: 0;
  height: 150px;
  width: 150px;
  background: url(http://spwest/sites/lahr/MX/Menu%20Compensaciones/03.jpg) no-repeat center;
  background-size: cover;
  transition: all 1s;
  z-index: 50;
}

.content-cuatro {
  position: relative;
  top: 0;
  height: 150px;
  width: 150px;
  background: url(http://spwest/sites/lahr/MX/Menu%20Compensaciones/Alimento.png) no-repeat center;
  background-size: cover;
  transition: all 1s;
  z-index: 50;
}

.content-cinco {
  position: relative;
  top: 0;
  height: 310px;
  width: 400px;
  background: url(http://spwest/sites/lahr/MX/Menu%20Compensaciones/1.png) no-repeat center;
  background-size: cover;
  transition: all 1s;
  z-index: 50;
}
.content-seis {
  position: relative;
  top: 0;
  height: 310px;
  width: 400px;
  background: url(http://spwest/sites/lahr/MX/Menu%20Compensaciones/seguro%20medico.png) no-repeat center;
  background-size: cover;
  transition: all 1s;
  z-index: 50;
}
.content-siete {
  position: relative;
  left: 0;
  height: 150px;
  width: 300px;
  background: url(http://spwest/sites/lahr/MX/Menu%20Compensaciones/Aguinaldo.png) no-repeat center;
  background-size: cover;
  transition: all 1s;
  z-index: 50;
}
.content-ocho {
  position: relative;
  left: 0;
  height: 150px;
  width: 300px;
  background: url(http://spwest/sites/lahr/MX/Menu%20Compensaciones/movilidad.png) no-repeat center;
  background-size: cover;
  transition: all 1s;
  z-index: 50;
}
.content-nueve {
  position: relative;
  top: 0;
  height: 150px;
  width: 150px;
  background: url(http://spwest/sites/lahr/MX/Menu%20Compensaciones/vale.png) no-repeat center;
  background-size: cover;
  transition: all 1s;
  z-index: 50;
}
.content-d10 {
  position: relative;
  top: 0;
  height: 150px;
  width: 150px;
  background: url(http://spwest/sites/lahr/MX/Menu%20Compensaciones/renta.png) no-repeat center;
  background-size: cover;
  transition: all 1s;
  z-index: 50;
}
.content-d11 {
  position: relative;
  top: 0;
  height: 150px;
  width: 150px;
  background: url(http://spwest/sites/lahr/MX/Menu%20Compensaciones/06_.jpg) no-repeat center;
  background-size: cover;
  transition: all 1s;
  z-index: 50;
}
.content-d12 {
  position: relative;
  top: 0;
  height: 150px;
  width: 150px;
  background: url(http:/) no-repeat center;
  background-size: cover;
  transition: all 1s;
  z-index: 50;
}
.content-d13 {
  position: relative;
  left: 0;
  height: 150px;
  width: 300px;
  background: url(http://spwest/sites/lahr/MX/Menu%20Compensaciones/Plan%20de%20retiro.png) no-repeat center;
  background-size: cover;
  transition: all 1s;
  z-index: 50;
}
.content-d14 {
  position: relative;
  left: 0;
  height: 150px;
  width: 300px;
  background: url(http:) no-repeat center;
  background-size: cover;
  transition: all 1s;
  z-index: 50;
}
.content-d15 {
  position: relative;
  left: 0;
  height: 150px;
  width: 300px;
  background: url(http://spwest/sites/lahr/MX/Menu%20Compensaciones/Bonos.png) no-repeat center;
  background-size: cover;
  transition: all 1s;
  z-index: 50;
}
.content-d16 {
  position: relative;
  left: 0;
  height: 150px;
  width: 300px;
  background: url(http:/) no-repeat center;
  background-size: cover;
  transition: all 1s;
  z-index: 50;
}
.content-d17 {
  position: relative;
  left: 0;
  height: 150px;
  width: 300px;
  background: url(http:/) no-repeat center;
  background-size: cover;
  transition: all 1s;
  z-index: 50;
}
.uno:hover .content-uno, .dos:hover .content-dos,
.siete:hover .content-siete, .ocho:hover .content-ocho,
.d13:hover .content-d13, .d14:hover .content-d14,
.d16:hover .content-d16, .d17:hover .content-d17,
.d15:hover .content-d15{
  left: -100px;
}

.uno:hover .seeallmd, .dos:hover .seeallmd,
.siete:hover .seeallmd, .ocho:hover .seeallmd,
.d13:hover .seeallmd, .d14:hover .seeallmd,
.d16:hover .seeallmd, .d17:hover .seeallmd,
.d15:hover .seeallmd{
  right: 0;
}

.tres:hover .content-tres, .cuatro:hover .content-cuatro,
.nueve:hover .content-nueve, .d10:hover .content-d10,
.d11:hover .content-d11,
.d12:hover .content-d12{
  top: -50px;
}

.tres:hover .seeallsm, .cuatro:hover .seeallsm,
.nueve:hover .seeallsm, .d10:hover .seeallsm,
.d11:hover .seeallsm,
.d12:hover .seeallsm{
  bottom: 0;
}

.cinco:hover .content-cinco,
.seis:hover .content-seis{
  top: 100px;
}

.cinco:hover .seealllg,
.seis:hover .seealllg{
  top: 0;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Cuadros ) is write by Angel Naranjo, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Angel Naranjo