JSFiddle - React, Tailwind, and code Playground

by Clear

HTML

<input class="blur" type="checkbox" name="blur" value="blur" id="test">

<label class="button" id="ciao" for="test">Blur</label>
    
<label class="button" id="ciao2" for="test">Unblur</label>

<img src="http://dvdimagehosting.altervista.org/images/appstore.png">

    <img src="http://dvdimagehosting.altervista.org/images/calculator.png">
        <img src="http://dvdimagehosting.altervista.org/images/calendar.png">

CSS

@import url(http://fonts.googleapis.com/css?family=Lato);

body {
    background: #27ae60;
}

.blur:checked ~ * {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

.blur {
    display: none;
}

.blur:checked + label#ciao {
    display: none;
}

.blur:checked ~ label#ciao2 {
    display: block;
    -webkit-filter: blur(0px);
    filter: blur(0px);
}

.button {
    height: 40px;
    width: 150px;
    text-align: center;
    line-height: 40px;
    background: #1d9650;
    cursor: pointer;
    font-family: 'Lato', Arial, sans-serif;
    text-transform: uppercase;
    color: #fff;
    margin: auto auto;
}

.button::selection {
    background: transparent;
}

.button::-moz-selection {
    background: transparent;
}

#ciao {
    display: block;
}

#ciao2 {
    display: none;
}

img {
    margin-top: 10px;
    float: left;
    transition-property: -webkit-filter, filter;
    transition-duration: 0.2s;
}