<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
This Pen doesn't use any external CSS resources.