JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://tinypic.com/r/4l35ab/5"></script>
<div class="circleDiv">
    <a href='#'></a>
</div>

CSS

.circleDiv{
  position: relative;
  background-color: #09f;
  margin: 30px 70px 30px 70px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  overflow:hidden;
}

.circleDiv a{
  background: url("http://s27.postimg.org/6ndnxsbqr/index.jpg") no-repeat right center;
  background-size: 50%;
  background-position: 50% 50%;
  display: block;
   height: 100%;
    width: 100%;
  
}

.circleDiv a:hover{
  background-size: 100%;
  }

JavaScript

$('.circleDiv').on('mouseenter', 'a', function() {
  $('body').animate({
    backgroundColor: "#09f"
  }, 1000);
});