JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png">
</div>

CSS

.circle {
  height: 475px;
  position: relative;
  width: 475px;
}
.circle > img {
  position:absolute;
  -webkit-transition:transform 0.15s linear 0s;
  -ms-transition:transform 0.15s linear 0s;
  transition:transform 0.15s linear 0s;
}
.circle > img:hover {
  -webkit-transform:scale(1.1);
  -ms-transform:scale(1.1);
  transform:scale(1.1);
}
.circle > img:nth-child(1) {
  left: 0;
  top: 0;
}
.circle > img:nth-child(2) {
  right: 0;
  top: 0;
}
.circle > img:nth-child(3) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.circle > img:nth-child(3):hover {
  -webkit-transform:scale(1.1) translateX(-50%);
  -ms-transform:scale(1.1) translateX(-50%);
  transform:scale(1.1) translateX(-50%);
}