A Pen by Paul Demers.

Half-Circle-Hover-Effect.markdown

Half Circle Hover Effect

A simple hover effect using two half circles made from a border-radius and some CSS3 animations.

A Pen by Paul Demers on CodePen.

License.

index.html

<div class="content">
  <div class="intro">
    <h1>Half Circle Hover Effect</h1>
    <p>A simple hover effect using two half circles made from a border-radius and some CSS3 animations.</p>
  </div>
  <hr />
  <div class="spinner_wrapper">
    <div class="spinner">
      <div class="inner_spin">
        <span class="halfie top"></span>
        <span class="halfie bottom"></span>
      </div>
      <span class="fullie"><img src="http://lorempixel.com/600/600" /></span>
    </div>

    <div class="spinner">
      <div class="inner_spin">
        <span class="halfie top"></span>
        <span class="halfie bottom"></span>
      </div>
      <span class="fullie"><img src="http://lorempixel.com/600/600/" /></span>
    </div>

    <div class="spinner">
      <div class="inner_spin">
        <span class="halfie top"></span>
        <span class="halfie bottom"></span>
      </div>
      <span class="fullie"><img src="http://lorempixel.com/600/600" /></span>
    </div>
  </div>
</div>

style.sass

@import "compass"
$base: 20em
$base_minus_one: ($base - 1)

*
  box-sizing: border-box

html
  background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/bedge_grunge.png) repeat

body
  color: #222

.intro
  text-align: center
  display: block
  padding-bottom: .5em
  margin: 0 auto

h1
  font-family: 'Oleo Script'
  text-shadow: white 1px 1px 0
  color: rgb(39, 75, 106)

.content
  width: 90%
  margin: 0 auto

.spinner_wrapper
  width: 72em
  margin: 0 auto
  
.spinner
  width: $base
  height: $base
  margin: 0 2em
  cursor: pointer
  position: relative
  float: left

.inner_spin
  width: $base
  height: $base
  -webkit-transform: rotate(20deg)
  -webkit-transition: all 1s
  /* Hardware acceleration FTW! */
  -webkit-transform: translateZ(0)
  -moz-transform: translateZ(0)

.fullie, .halfie
  display: block
  margin: 0 auto
  position: absolute

.fullie
  width: ($base - 1)
  height: ($base - 1)
  background: #BD4932
  border-radius: ($base - 1)
  z-index: 2
  top: 50%
  left: 50%
  margin-top: -(($base - 1) / 2)
  margin-left: -(($base - 1) / 2)

.halfie
  height: ($base / 2)
  width: $base
  z-index: 1

  &.top
    border-radius: $base $base 0 0
    background: #105B63
    
  &.bottom
    top: ($base / 2 )
    border-radius: 0 0 $base_minus_one $base_minus_one
    background: #FFD34E
    
.spinner:hover
  opacity: .95
  .inner_spin
    -webkit-transform: rotate(180deg)
    
  img
    opacity: .25
  
img
  width: $base_minus_one
  height: $base_minus_one
  border-radius: $base_minus_one
  opacity: 1
  -webkit-transition: all 1s