He hecho algo similar, está un poco feo ya que lo he hecho en 10 minutos, pero la funcionalidad que pides la tiene, aquí te dejo el demo:
Document
Y el código:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.contenedor {
width: 450px;
height: 450px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.blur {
filter: blur(4px);
z-index: -1
}
.tamano {
width: 400px;
}
.manito {
filter: blur(0);
position: absolute;
width: 64px;
height: 64px;
z-index: 10;
background-image: url('https://image.flaticon.com/icons/svg/109/109620.svg');
background-size: 64px 64px;
background-position: center center;
background-repeat: no-repeat;
border-radius: 50%;
border: solid 3px white;
padding: 8px;
}
</style>
</head>
<body>
<div class="contenedor">
<img class="blur tamano" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" alt="">
<div class="manito"></div>
</div>
<script>
var manito = document.querySelector('.manito');
manito.addEventListener('click', function () {
var imagen = document.querySelector('.blur');
imagen.classList.remove('blur');
})
</script>
</body>
</html>
Recalco nuevamente que el código hay que trabajarlo más para hacerlo más atractivo, ordenarlo mejor y separarlo en archivos distintos, pero puedes partir de este código para adaptarlo a lo que necesitas. Un saludo
