<section class="bg-faded container-fluid">
  <div class="row py-3 flex-items-sm-center">
    <!--
User Card
-->
    <div class="col-xs-12 col-sm-3 py-2 clearfix">
      <div class="card profile-card">
        <figure>
          <input id="fab" type="checkbox" class="fab"><label for="fab" class="toggle">+</label>
          <img src="http://cps-static.rovicorp.com/3/JPG_400/MI0003/711/MI0003711195.jpg?partner=allrovi.com" class="img-fluid img-profile" alt="Card image">
        </figure>
        <div class="card-block text-xs-center">
          <p class="h4 card-title font-weight-bold">Phar Ell</p>
          <p class="h6 card-subtitle text-muted">C.E.O</p><br>
        </div>
      </div>
    </div>
  </div>
</section>

@import "https://fonts.googleapis.com/css?family=Muli";
*{
  font-family: "Muli",sans-serif;
}
.card.profile-card {
	box-shadow: 0px 0px 20px #DFDFDF;
	border: none;
	border-radius: 0;
}

input.fab {
	display: none
}

figure {
  overflow: hidden
}

.img-profile {
    -webkit-clip-path: circle(52% at 70% 38%);
    -moz-clip-path: circle(52% at 70% 38%);
    clip-path: circle(52% at 70% 38%);
    transform: translatez(0);
    transition: all .3s linear;
}
.img-profile:hover {
    -webkit-clip-path: circle(30% at 50% 50%);
    clip-path: circle(30% at 50% 50%);
  transform: scale(1.07) rotate(-5deg) translatez(0)
}
.profile-card .fab+.toggle {
	top: 63%;
	z-index: 10;
	right: 0;
	width: 50px;
	height: 50px;
	cursor: pointer;
	font-size: 60px;
	line-height: 50px;
	text-align: center;
	border-radius: 50%;
	position: absolute;
	color: #fff;
	background: #F44336;
	-webkit-user-select: none;
	box-shadow: 0 4px 4px #666;
	transition: all 0.3s ease-in-out 0s;
}

.fab:checked+.toggle {
	color: #fff;
	background: #F44336;
	transform: rotate(135deg);
	box-shadow: 2px -2px 4px #333;
	transition: all 0.3s ease-in-out 0s;
}

/* Sorry CSS 3 to tha rescue */