CodePen

HTML

            
              <div class="circle">
  
</div>
<img src="http://farm9.staticflickr.com/8067/8248649251_204626503c_b.jpg" />




            
          
!

CSS

            
              img {
  display: block;
  margin: 0 auto;
  position: relative;
  width: 400px;
}

img:hover {
  -webkit-filter: hue-rotate(50deg) sepia(70%);
}

.circle {
  background: red;
  height: 200px;
  width: 200px;
  
  border-radius: 200px;
  float: left;
  
  -webkit-filter: drop-shadow(5px 5px 20px #000);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................