JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<img id="first" src="http://eco-tours.connect.ge/uploads/slider/5d4d877e40b55.png" alt="">
<img src="https://theecologist.org/sites/default/files/styles/inline_l/public/2018-05/contre_jour_leaves_lens_flare_meadow_nature_park_sky_summer-948356.jpg?itok=JqgRwHxm" alt="" id="second">

CSS

body {
    margin: 0;
}
img#first {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 2;
    object-fit: contain;
    transition: 1s;
}
.active img#first {
    filter: blur(10px);
}
img#second {
    width: 100%;
    height: 100%;
    position: fixed;
    filter: blur(10px);
    transition: 1s;
    z-index: 0;
    object-fit: contain;
}
.active img#second {
    filter: blur(0);
}

JavaScript

document.addEventListener('mousedown',function(){
	document.body.classList.add('active')
})
document.addEventListener('mouseup',function(){
	document.body.classList.remove('active')
})