.circle {
  float:left;
  position: relative;
  width: 250px;
  height: 250px;
  border:1px solid #000;
  overflow: hidden;
}

.circle img {
  width: 100%;
  height: 100%;
  border: 10px solid #00aaff;

  -webkit-border-radius:50%;
  -khtml-border-radius:50%;
  -moz-border-radius:50%;
  -ms-border-radius:50%;
  -o-border-radius:50%;
  border-radius:50%;

  -webkit-box-sizing:border-box;
  -khtml-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -o-box-sizing:border-box;
  box-sizing:border-box;
}

.circle .mask-top-container, .circle .mask-bottom-container {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 101%;
  height: 51%;
  overflow: hidden;
}

.circle .mask-bottom-container {
  top: 50%;
}

.circle .mask-top, .circle .mask-bottom {
  width: 100%;
  height: 100%;
  background: #fff;

  -webkit-transition:all 500ms ease-in-out;
  -khtml-transition:all 500ms ease-in-out;
  -moz-transition:all 500ms ease-in-out;
  -ms-transition:all 500ms ease-in-out;
  -o-transition:all 500ms ease-in-out;
  transition:all 500ms ease-in-out;

  -webkit-transform-origin:50% 100%;
  -khtml-transform-origin:50% 100%;
  -moz-transform-origin:50% 100%;
  -ms-transform-origin:50% 100%;
  -o-transform-origin:50% 100%;
  transform-origin:50% 100%;

  -webkit-backface-visibility: hidden;
  -khtml-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.circle .mask-bottom {
  -webkit-transform-origin:50% 0%;
  -khtml-transform-origin:50% 0%;
  -moz-transform-origin:50% 0%;
  -ms-transform-origin:50% 0%;
  -o-transform-origin:50% 0%;
  transform-origin:50% 0%;
}

.circle:hover .mask-top{
  -webkit-transform:rotate(180deg);
  -khtml-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  transform:rotate(180deg);
}

.circle:hover .mask-bottom{
  -webkit-transform:rotate(-180deg);
  -khtml-transform:rotate(-180deg);
  -moz-transform:rotate(-180deg);
  -ms-transform:rotate(-180deg);
  -o-transform:rotate(-180deg);
  transform:rotate(-180deg);
}