VOLVER
NOTAS
Close
texto. texto, texto
texto. texto, texto
×
DIGI
Projects
Atelier
Run ❯
<!DOCTYPE html> <html lang="en" > <head> <style> body { margin: auto; background: #F2F5E9; width: 450px; font-family: "Arial" } ul { padding:0; } ul.gallery li { display: inline-block; opacity:1; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; } label { cursor: pointer; color: #fff; background: #5D6B74; padding: 5px 19px; } input { display: none; } img { padding: 5px; border: 1px solid #ccc; } /*Select Categorie*/ input#select-animals:checked ~ .gallery li:not(.animals-item), input#select-lightning:checked ~ .gallery li:not(.lightning-item), input#select-desert:checked ~ .gallery li:not(.desert-item) { opacity: 0.1; } </style> </head> <body> <!-- partial:index.partial.html --> <h2>Galeria de Imagenes en CSS</h2> <input type="radio" id="select-all" name="button"> <label for="select-all" class="label-all"> All </label> <input type="radio" id="select-animals" name="button"> <label for="select-animals" class="label-animals"> Animals </label> <input type="radio" id="select-lightning" name="button"> <label for="select-lightning" class="label-lightning"> Lightning </label> <input type="radio" id="select-desert" name="button"> <label for="select-desert" class="label-desert"> Desert </label> <ul class="gallery"> <li class="animals-item"> <img src="img/parrot.jpg" /> </li> <li class="desert-item"> <img src="img/mountain.jpg" /> </li> <li class="lightning-item"> <img src="img/dawn.jpg" /> </li> <li class="desert-item"> <img src="img/desert.jpg" /> </li> <li class="animals-item"> <img src="img/alce.jpg" /> </li> <li class="lightning-item"> <img src="img/lightning.jpg" /> </li> <li class="animals-item"> <img src="img/lion.jpg" /> </li> <li class="lightning-item"> <img src="img/thunder.jpg" /> </li> <li class="desert-item"> <img src="img/dawn.jpg" /> </li> </ul> <!-- partial --> <script src="./script.js"></script> </body> </html>