<div class="mask pseudo">
  <a href="http://css3create.com">
    <img src="http://dev.iamvdo.me/newLogoCSS3create2.png" alt="CSS3Create logo" />
<p>Just over hover the logo. Enjoy.</p>

<p>Next demo: <a href="https://codepen.io/iamvdo/pen/xECmI" target="_blank">Progressive blur with CSS & SVG masks</a></p>

<svg height="0">
  <!-- THE mask -->
  <mask id="mask-firefox">
    <image width="150" height="64" xlink:href="http://dev.iamvdo.me/newLogoCSS3create2.png" filter="url(#filter)" /> 
  <!-- the filter to make the image white -->
  <filter id="filter">
    <feFlood flood-color="white" />
    <feComposite in2="SourceAlpha" operator="in" />
@import url(https://fonts.googleapis.com/css?family=Raleway);
  font: .9em 'Raleway',sans-serif;
  height: 100%;
  text-align: center;
  background: radial-gradient(50% 0,rgba(255,255,255,.3),rgba(255,255,255,0)), deepskyblue;
  color: rgba(0,0,0,.6);
p a{
  color: rgba(0,0,0,.6);
.mask a{
  position: relative;
  height: 64px;
  margin: 50px auto;
  background: ;
  -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,.5));
.mask a{
  background-position: -140px 0;
.mask a:hover,
.mask a:focus{
  background-position: 10px 0;
  /*change speed to see in slow motion*/
  transition: all 1s;
.mask a::after{
  position: absolute;
  pointer-events: none;
  top:0; left:0; right:0; bottom: 0;
  background: radial-gradient(0 0,circle farthest-side, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
  background: radial-gradient(circle farthest-side at 0 0, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
  background-position: inherit; 
  -webkit-mask: url('http://dev.iamvdo.me/newLogoCSS3create2.png') center;
  mask: url('#mask-firefox');

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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