Responsive square elements

Responsive divs

by jeremyperson

HTML

<!-- 1st row verticaly centered text in the square columns -->

<div class="woohooContainer">

  <a href="#" onclick="return false;">
    <div class="square tilt" id="div1">
      <div class="content">
        <div class="table">
          <div class="table-cell">
            <img class="rs" src="https://www.virtualdj.com/image/17856/148346/homer-woohoo.jpg" /> Div 1
          </div>
        </div>
      </div>
    </div>
  </a>

  <a href="#" onclick="return false;">
    <div class="square tilt" id="div2">
      <div class="content">
        <div class="table">
          <div class="table-cell">
            <img class="rs" src="https://www.virtualdj.com/image/17856/148346/homer-woohoo.jpg" /> Div 2
          </div>
        </div>
      </div>
    </div>
  </a>

  <a href="#" onclick="return false;">
    <div class="square tilt" id="div3">
      <div class="content">
        <div class="table">
          <div class="table-cell">
            <img class="rs" src="https://www.virtualdj.com/image/17856/148346/homer-woohoo.jpg" /> Div 3
          </div>
        </div>
      </div>
    </div>
  </a>

  <!-- 2nd row verticaly centered images in square columns -->
  <a href="#" onclick="return false;">
    <div class="square tilt" id="div4">
      <div class="content">
        <div class="table">
          <div class="table-cell">
            <img class="rs" src="https://www.virtualdj.com/image/17856/148346/homer-woohoo.jpg" /> Div 4
          </div>
        </div>
      </div>
    </div>
  </a>

  <a href="#" onclick="return false;">
    <div class="square tilt" id="div5">
      <div class="content">
        <div class="table">
          <div class="table-cell">
            <img class="rs" src="https://www.virtualdj.com/image/17856/148346/homer-woohoo.jpg" /> Div 5
          </div>
        </div>
      </div>
    </div>
  </a>

  <a href="#" onclick="return false;">
    <div class="square tilt" id="div6">
      <div class="content">
        <div class="table">
         ...

CSS

.woohooContainer {
  width: 100%;
  /*we might have to experiment with this */
}

.woohooContainer a:link {
  color: white;
}

.woohooContainer a:hover {
  color: yellow;
}

.tilt {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.tilt:hover {
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  transform: rotate(10deg);
  opacity: 0.5;
}

.content:hover {
  background: #404040;
}

.square {
  float: left;
  position: relative;
  width: 30%;
  padding-bottom: 30%;
  margin: 1.66%;
  background-color: #1E1E1E;
  overflow: hidden;
  font-size: 16px;
  font-family: 'Lato', verdana, sans-serif;
  color: #fff;
  text-align: center;
}

.square:hover {
  -moz-box-shadow: 0 0 10px #ccc;
  -webkit-box-shadow: 0 0 10px #ccc;
  box-shadow: 0 0 10px #ccc;
}

.content {
  position: absolute;
  height: 90%;
  width: 90%;
  padding: 5%;
}

.table {
  display: table;
  width: 100%;
  height: 100%;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
}


/*  For responsive images */

.content .rs {
  width: auto;
  height: auto;
  max-height: 90%;
  max-width: 100%;
}

JavaScript

$("#div1").click(function() {
  $('html, body').animate({
    scrollTop: $("#1").offset().top
  }, 2000);
});

$("#div2").click(function() {
  $('html, body').animate({
    scrollTop: $("#2").offset().top
  }, 2000);
});

$("#div3").click(function() {
  $('html, body').animate({
    scrollTop: $("#3").offset().top
  }, 2000);
});

$("#div4").click(function() {
  $('html, body').animate({
    scrollTop: $("#4").offset().top
  }, 2000);
});

$("#div5").click(function() {
  $('html, body').animate({
    scrollTop: $("#5").offset().top
  }, 2000);
});

$("#div6").click(function() {
  $('html, body').animate({
    scrollTop: $("#6").offset().top
  }, 2000);
});