<h1>Hover over the space below</h1>

<div class="circle">

  <img src="http://placekitten.com/g/500/500" />

  <div class="mask-top-container">
    <div class="mask-top"></div>
  </div>
  <div class="mask-bottom-container">
    <div class="mask-bottom"></div>
  </div>

</div>

<p>Above this though. It's in the middle.</p>
@import "compass/css3";

$diameter      : 250px; // include units, do not use %
$border        : 10px;  // include units
$border-color  : hsl(200, 100, 50);
$bg-color      : hsl(200, 50, 10);
$anim-duration : 500ms;
$anim-easing   : ease-in-out;

@import url(https://fonts.googleapis.com/css?family=Lato:100,400);

body {
  background: $bg-color;
  font-family: Lato, sans-serif;
  color: hsl(200, 100, 100);
  text-align: center;
}

.circle {
  position: relative;
  width: $diameter;
  height: $diameter;
  margin: 40px auto;
  
  img {
    width: 100%;
    height: 100%;
    border: $border solid $border-color;
    border-radius: 50%;
    @include box-sizing(border-box);
  }

  // Notice the pixel fudging below. Trying to hide subpixel junk from animation. There are still issues below ~50px in Chrome.

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

  .mask-bottom-container { top: 50%; }
  
  .mask-top, .mask-bottom {
    width: 100%;
    height: 100%;
    background: $bg-color ;
    @include transition(all $anim-duration $anim-easing);
    @include transform-origin(50%, 100%);
    -webkit-backface-visibility: hidden;
  }

  .mask-bottom { @include transform-origin(50%, 0%); }

  &:hover {
    .mask-top    { @include transform(rotate(180deg)); }
    .mask-bottom { @include transform(rotate(-180deg)); }
  }
  
}


h1 {
  font: 100 40px Lato, sans-serif;
  color: hsl(200, 100, 85);
  text-align: center;
  letter-spacing: 5px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js