Blur after click

[sight011]

Sehr geil!

Auf iOS läuft das wie Sahne!

Gilt das nur für Text oder geht das auch für divs/Bilder?

 

[SpiceLab]

Der Effekt kann ebenso auf Bilder (<img> & background-image) angewendet werden.

 

[sight011]

Danke noch mal Spicelab.

Hier noch mal der gesamte Code.

HTML:

<div class="button" data-target="#text" data-shown-text="Blur" data-hidden-text="Non-Blur">Blur</div>
<div id="text"> I want to blur by pressing the button above </div>

CSS:
.button {
    display: block;
    height: 20px;
    width: 100px;
    background: lightgreen;
    text-align: center;
    padding: 5px;
    font: 15px Tahoma;
    border: 1px solid black;
    text-decoration: none;
    list-style:none;
    margin: 10px 0px 10px 0px;
}
#text {
    -webkit-filter: blur(0px);
}


JS:
var button = document.querySelector('.button');
button.addEventListener('click', function(event) {
    var target = document.querySelector(button.getAttribute('data-target'));
    if (target.style.webkitFilter == "blur(5px)") {
        target.style.webkitFilter = "blur(0px)";
        button.innerHTML = button.getAttribute('data-shown-text');
    } else {
        target.style.webkitFilter = "blur(5px)";
        button.innerHTML = button.getAttribute('data-hidden-text');
    }
});