JSFiddle - React, Tailwind, and code Playground

by Aziz Natour

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container">
  <span class="bubble fa fa-inverse fa-google fa-fw fa-lg"></span>
  <hr>
  <span class="bubble fa fa-inverse fa-facebook fa-fw fa-lg"></span>
  <hr>
  <span class="bubble fa fa-inverse fa-twitter fa-fw fa-lg"></span>
  <hr>
  <span class="bubble fa fa-inverse fa-github fa-fw fa-lg"></span>
</div>

CSS

html { background-color: rgba(0, 0, 0, 0.75); }

.container { margin: 10% auto; text-align: center; }

.container hr {
  display: inline-block;
  position: relative;
  top: .1em;
  width: 15%;
}

.bubble {
  padding: 1em;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.bubble::after {
  content:'';   position: absolute;
  background: url(http://imgh.us/Service_bubble.svg) center no-repeat;
  background-size: contain;
  transition: all 0.3s ease-in-out;
  height: 100%; width: 100%;
  top: 0; left: 0;
}

.bubble:hover {
  transform: scale(1.5);
  margin: 0 10px;
}

.bubble:hover::after { transform: rotate(-90deg); }

JavaScript

// fontawesome 4.5.0