Multiple Cards Responsive Wrap

by Jordan Dayton

HTML

<div style="padding-top: 60px;"></div>
    
<div class="cards-wrapper">

  <div class="cards-container hvr-shrink">
    <div>
     <a href="/community-central/">
      <div class="cards hvr-glow" id="card-community">
        <div>
          <div>
            <img class="img-pos" src="https://community.jewelbound.com/uploads/default/original/1X/63110914943f70ee8019596350330b3a6b3882b7.png">
          </div>
          <div class="cards-title">Community Central</div>
        </div>
      </div>
     </a>
    </div>
  </div>
  <div class="cards-container hvr-shrink">
    <div>
    <a href="/questions-discussions/">
      <div class="cards hvr-glow" id="card-questions">
        <div>
          <div>
            <img class="img-pos" src="https://png.icons8.com/ios/80/ffffff/chat.png">
          </div>
          <div class="cards-title">Questions & Discussions</div>
        </div>
      </div>
      </a>
    </div>
  </div>
  <div class="cards-container hvr-shrink">
    <div>
    <a href="/resources-shared-practices/">
      <div class="cards hvr-glow" id="card-resources">
        <div>
          <div>
            <img class="img-pos" src="https://png.icons8.com/ios/80/ffffff/documents-folder.png">
          </div>
          <div class="cards-title">Resources & Shared Practices</div>
        </div>
      </div>
      </a>
    </div>
  </div>
  <div class="cards-container hvr-shrink">
    <div>
    <a href="/tax-accounting-events/">
      <div class="cards hvr-glow" id="card-events">
        <div>
          <div>
            <img class="img-pos" src="https://png.icons8.com/ios/80/ffffff/overtime.png">
          </div>
          <div class="cards-title">Tax & Accounting Events</div>
        </div>
      </div>
      </a>
    </div>
  </div>

</div>

CSS

.cards-wrapper {
  text-align: center;
  margin-top: 0;
}

.cards-container {
  display: inline-block;
  width: 360px;
  height: 320px;
  padding: 5px;
  vertical-align: top;
}

.cards {
  width: 140px;
  height: 140px;
  background: #ffffff;
  border-radius: 5px;
  vertical-align: top;
  margin: 0 auto;
  position: relative;
  box-shadow: 0px 0px 60px 0px #cccccc;
}

.cards:active {
    opacity: .8;
}

.cards-title {
  padding-top: 50px;
  font-size: 18px;
  color: #3aae93;
}

.img-pos {
  padding-top: 20px;
}

a:link {
  color: #0080CC;
  text-decoration: none;
}

a:hover {
  color: #58585B;
  text-decoration: underline;
}

a:visited {
  color: #0080CC;
}

/* Shrink */
.hvr-shrink {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}