Footer Offers - no hover effects

by Jordan Dayton

HTML

<div style="padding-top: 30px;"></div>
    
<div class="ft">

<div class="footer-wrapper">

  <div class="footer-card-container hvr-shrink">
     <a href="https://opencourse.canopytax.com/collections">
      <div class="footer-card">
          <div>
            <img class="img-pos" src="https://png.icons8.com/ios/64/555555/certificate-filled.png">
          </div>
          <div class="footer-card-title">FREE CPE Credits (40+)</div>
      </div>
     </a>
  </div>
  <div class="footer-card-container hvr-shrink">
    <a href="https://us.canopytax.com/transcripts">
      <div class="footer-card">
          <div>
            <img class="img-pos" src="https://png.icons8.com/ios/64/555555/ledger-filled.png">
          </div>
          <div class="footer-card-title">FREE IRS Transcripts Tool</div>
      </div>
      </a>
  </div>
  <div class="footer-card-container hvr-shrink">
    <a href="https://www.canopytax.com/ebooks/">
      <div class="footer-card">
          <div>
            <img class="img-pos" src="https://png.icons8.com/ios/64/555555/book-shelf-filled.png">
          </div>
          <div class="footer-card-title">FREE Tax/Accounting eBooks</div>
      </div>
      </a>
  </div>
  
</div>

</div>

<div style="padding-top: 30px;"></div>

CSS

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

.ft .footer-card-container {
  display: inline-block;
  width: 300px;
  height: 200px;
  padding: 5px;
  vertical-align: top;
}

.ft .footer-card {
  width: 300px;
  height: 180px;
  border-radius: 5px;
  vertical-align: top;
  margin: 0 auto;
  position: relative;
}

.ft .footer-card:active {
    opacity: .8;
}

.ft .img-pos {
  padding-top: 35px;
}

.ft .footer-card-title {
  padding-top: 18px;
  font-size: 18px;
  color: #555555;
}

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

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

.ft 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);
}