Pure CSS Solution
HTML
<input type='checkbox' />
<div id='wrap'>
<div></div>
<div></div>
</div>
CSS
body {
background:green;
}
#wrap {
height:200px;
position:relative;
}
div div {
height:60px;
background-repeat:no-repeat;
position:absolute;
width:100%;
top:0;
}
div div {
transition:opacity 250ms ease-in;
}
div div:first-child {
background-image: url(http://hawcons.com/files/images/iconsfilled.svg);
opacity:1;
}
div div:last-child {
background-image: url(http://hawcons.com/files/images/icons.svg);
opacity:0;
}
input[type=checkbox]:checked+div div:first-child {
opacity:0;
}
input[type=checkbox]:checked+div div:last-child {
opacity:1;
}