Moonstone

<style>

  .backgroundcardM {
    width:90%;
    margin:auto;
    border:10px solid #F4FEFE;
    background:#BBD2E1;
    box-shadow:2px 2px 5px #000;
  }

  .titlecardM {
    margin:10px;
    text-align:center;
    font-size: 70px;
    font-family: 'Butterfly Kids';
    color: #F4FEFE;
    text-shadow: 1px 1px 5px #000;
  }

  .linepicM {
    display:flex;
    justify-content:space-between;
    padding:10px;
  }

  .piccardM {
    width:150px;
    height:150px;
    border-radius:75px;
    border:2px solid #F4FEFE;
    margin:auto;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4);
    text-align:center;
  }

  .piccardM > p {
    padding-top:25px;
    font: 20px 'Sofia';
      transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
      opacity:0;
    cursor:pointer;
    color:#BBD2E1;
  }

  .piccardM:hover > p {
      opacity:1;
      color: #F4FEFE;
  }

</style>

<link href="https://fonts.googleapis.com/css2?family=Butterfly+Kids&family=Sofia&display=swap" rel="stylesheet">


<div class="backgroundcardM">
  <div class="titlecardM">An amazing Title</div>
  <!--EACH LINE-->
  <div class="linepicM">
    <!--EACH PIC-->
    <div class="piccardM" style="background:url(https://64.media.tumblr.com/153a97394dc88a5ff5c8e3d598d32414/tumblr_inline_pted0sSug21rjxgbh_400.gifv)center; background-size:cover;">
      <p>An amazing Name</p>
    </div>
    <!--EACH PIC-->
    <div class="piccardM" style="background:url(https://64.media.tumblr.com/99bb67e7e12c948b4a532083bb7dcd31/tumblr_inline_ptiezz5cJ71rjxgbh_400.gifv)center; background-size:cover;">
      <p>An amazing Name</p>
    </div>
    <!--EACH PIC-->
    <div class="piccardM" style="background:url(https://i.pinimg.com/originals/60/8d/76/608d7644747dde1739f5572898957d34.gif)center; background-size:cover;">
      <p>An amazing Name</p>
    </div>
  </div>
   <!--EACH LINE-->
  <div class="linepicM">
    <!--EACH PIC-->
    <div class="piccardM" style="background:url(https://i.gifer.com/WHc2.gif)center; background-size:cover;">
      <p>An amazing Name</p>
    </div>
    <!--EACH PIC-->
    <div class="piccardM" style="background:url(https://i.pinimg.com/originals/02/6f/13/026f13b2858b8cb9e34df879a769b285.gif)center; background-size:cover;">
      <p>An amazing Name</p>
    </div>
  </div>
</div>


<!-- CREDITS, DO NOT TOUCH-->
<div style="margin:0 auto;text-align:center;"><a href="https://aliyahscreations.tumblr.com/" style="font-size:10px;letter-spacing:2px;color:#222;text-decoration:none; font-family:century gothic,helvetica,arial,sans-serif;font-size:12px;line-height:1.3;">© Code by Aliyah</a></div>