JSFiddle - React, Tailwind, and code Playground

by gbarnett

HTML

<div class="container">
    <div class="rounded-picture">
        <img src="http://www.gravatar.com/avatar/d8be48fc05c55d0f558f40244f5f5f2b/?default=&s=160" />
    </div>
    <div class="rounded-picture2">
        <img src="http://www.gravatar.com/avatar/d8be48fc05c55d0f558f40244f5f5f2b/?default=&s=160" />
    </div>
</div>
<button id="toggle-blur">toggle-blur</button>

CSS

.container {
    -webkit-filter: none;
    -webkit-transition: -webkit-filter 1s ease; 
}
.container.blur {
    -webkit-filter: blur(20px);
}
.rounded-picture {
    width: 100px;
    height: 100px;
    border-radius: 80px;
    overflow: hidden;
}
.rounded-picture2 {
    width: 100px;
    height: 100px;
    border-radius: 80px;
    overflow: hidden;
    position: absolute;
    top: 10px;
    left: 200px;
}
#toggle-blur {
    position: absolute;
    top: 200px;
    left: 10px;
}

JavaScript

$('#toggle-blur').on('click', function() {
    var $container = $('.container');
    if($container.hasClass('blur')) {
        $('.container').removeClass('blur');
    } else {
        $('.container').addClass('blur');
    }
});