*{margin:0;padding:0}body{background:#ccc}.slider{width:100%;position:relative;padding-top:42%;margin:5px auto;}.slider>img{position:absolute;left:0;top:0;transition:all .5s}.slider input[name=slide_switch]{display:none}.slider label{margin:18px 0 0 18px;border:3px solid #999;float:left;cursor:pointer;transition:all .5s;opacity:.6}.slider label img{display:block}.slider input[name=slide_switch]:checked+label{border-color:#666;opacity:1}.slider input[name=slide_switch]~img{opacity:0;transform:scale(1.1)}.slider input[name=slide_switch]:checked+label+img{opacity:1;transform:scale(1)}