JSFiddle - React, Tailwind, and code Playground

HTML

<div id='circle'>
  <img src='http://goo.gl/pWqRbS' id='cloud'>
  <h2 id='temp'>54°</h2>
</div>

CSS

#circle {
  background-color:black;
  background-image:url('http://goo.gl/zyuzK7');
  height:300px;
  width:300px;
  border-radius:100%;
  margin:0 auto;
  perspective:1000;
  /* transition:transform 2s, opacity .1s; */
  transition: transform 2s 0s, opacity 0s 2s;
}

#circle:hover {
  perspective:1000px;
  transform:rotateY(180deg);
  opacity:.25;
}

#cloud {
  height:70px;
  padding:10px;
  position:relative;
  left:10%;
  top:105px;
}

#temp {
  font-family: 'Slabo 27px', serif;
  position:relative;
  left:45%;
  font-size:100px;
  bottom:100px;
  color:white;
}