radmiraal/jsbin.EwiXEDo.css

## jsbin.EwiXEDo.css
#cf {
  position:relative;
  height:200px;
  width:200px;
  margin:0 auto;
}

#cf .box {
  position:absolute;
  left:0;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
}

#cf .top:hover {
  opacity:0;
}

#cf .blue-box {
  background-color: blue;
  display: inline-block;
  width: 200px;
  height: 200px;
}

#wrapper {
  width: 200px; height: 200px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */

  /* this fixes the overflow:hidden in Chrome */
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

#cf {
  width: 200px; height: 200px;
  background-color: #cde;
}

## jsbin.EwiXEDo.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset=utf-8 />
      <title>JS Bin</title>
   </head>
   <body>
     <div id="wrapper">
      <div id="cf">
         <img class="box bottom" src="http://css3.bradshawenterprises.com/images/Clown%20Fish.jpg" />

        <span class="box top blue-box"></span>
      </div>
     </div>
   </body>
</html>
	#cf {
	position:relative;
	height:200px;
	width:200px;
	margin:0 auto;
	}

	#cf .box {
	position:absolute;
	left:0;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
	}

	#cf .top:hover {
	opacity:0;
	}

	#cf .blue-box {
	background-color: blue;
	display: inline-block;
	width: 200px;
	height: 200px;
	}

	#wrapper {
	width: 200px; height: 200px;
	border-radius: 100px;
	overflow: hidden;
	position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */

	/* this fixes the overflow:hidden in Chrome */
	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
	}

	#cf {
	width: 200px; height: 200px;
	background-color: #cde;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<div id="wrapper">
	<div id="cf">
	<img class="box bottom" src="http://css3.bradshawenterprises.com/images/Clown%20Fish.jpg" />

	<span class="box top blue-box"></span>
	</div>
	</div>
	</body>
	</html>