Cuadros

In this example below you will see how to do a Cuadros with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by GeloMaster, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright GeloMaster ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<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/GeloMaster/cuadros-aBajZJ */
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;
}

Comments