photo develop effect

by eprouver

HTML

<div class="holder">
    <img id="hold" class="loading" src="http://lorempixel.com/g/350/250/" onload="this.className = ''"/>        
</div>

<button class="changer" data="http://lorempixel.com/g/350/250/nature/">Nature</button>
<button class="changer" data="http://lorempixel.com/g/350/250/nightlife/">Nightlife</button>
<button class="changer" data="http://lorempixel.com/g/350/250/nightlife/">Other</button>

CSS

img{
    -webkit-transition:all 0.5s ease;
    transition: all .5s ease;
}
.loading{
	-webkit-filter:brightness(800%) blur(2px);
    filter: brightness(800%) blur(2px);
}

JavaScript

$('.changer').on('click',function(){
$('#hold').addClass('loading').attr('src', $(this).attr('data'));

});