<div class="container">
<div class="row valign-wrapper" style="margin-top:10%">
    <div class="col s6 offset-s3 valign">
      <div class="card hoverable">
        <div class="card-image">
          <img src="https://images.unsplash.com/photo-1505664063603-28e48ca204eb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9e4a2667054af80d03d376a9f28640ea&auto=format&fit=crop&w=750&q=80">
          <span class="card-title">The Best Law Office in Houston</span>
          <a id="tuk" class="btn-floating halfway-fab waves-effect waves-light teal darken-1 hoverable"><i class="material-icons">add</i></a>
        </div>
        <div class="card-content brown lighten-1">
          <p class="white-text text-darken-1">WE HAVE THE EXPERIENCE AND CONFIDENCE YOU ARE LOOKING FOR.</p>
          
           <!-- Element Showed -->
  <div class="action-btn">
  <a id="menu" class="waves-effect waves-light btn btn-floating" ><i class="material-icons">clear</i></a>
  </div>
  
  <!-- Tap Target Structure -->
  <div class="tap-target" data-activates="menu">
    <div class="tap-target-content">
      <p style="margin-top:220px; cursor:pointer;"><i class="large material-icons">phone</i></p>
      <p style=" cursor:pointer;margin-top:-180px; margin-left:150px;"> <i class="large material-icons">email</i></p>
     <p style="cursor:pointer; margin-top:-240px; margin-left:250px;">  <i class="large material-icons">location_on</i></p>
    </div>
  </div>
          
        </div>
      </div>
 </div>
    </div>
  </div>
  

  

body::after {
  content: '';
  background-image:url('https://images.unsplash.com/photo-1505664063603-28e48ca204eb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9e4a2667054af80d03d376a9f28640ea&auto=format&fit=crop&w=750&q=80');
  background-size: cover;
  filter:blur(5px);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

.tap-target-wrapper.open .tap-target {
      transform: scale(0.4);
  font-size:46px;
  background: none ;
 box-shadow:none;
}
#menu {
  display:none;
}
.tap-target-content i {
  color: #ee6e73;
}
.tap-target-content i:hover {
  color: #ff3c41;
}
.tap-target-content {
  top:350px!important;
  background: grey;
  border-radius: 0 0 100%;
 left: 350px!important;
}
$("#tuk").click(function(){
  $('.tap-target').tapTarget('open');
  });

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js