@import url(http://fonts./css?family=Quicksand:700); * {margin: 0; padding: 0; border: 0 none; position: relative;} *, ::after, ::before {-moz-box-sizing: border-box; box-sizing: border-box;} html, body {background: #e9eadb; color: #444; text-align: center; font-family: Quicksand, sans-serif; color: #444; line-height: 1rem;} p {color: peru; font-size: 1.5rem; padding-top: 10px;} #galeria { background: #fff ; display: inline-block; max-width: 900px; margin: 1rem auto; padding: 0 10px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), 0 15px 15px -12px rgba(0, 0, 0, 0.35); text-align: center; border-radius: 3px; } figure#filtro { margin: 0 0 15px; padding: 0; text-align: center; letter-spacing: 10px; } figure#filtro img { width: 0px; margin: 10px 0 0 0; border-radius: 5px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), 0 15px 15px -12px rgba(0, 0, 0, 0.55); border-top: 1px solid #e0e0e0; -webkit-transition: 1s; transition: 1s; } input#nature:checked ~ figure img.nature { width: 250px;} input#nature:checked ~ figure img:not(.nature) { opacity: 0; position: absolute; top: 0; left: 50%;} input#sport:checked ~ figure img.sport { width: 250px;} input#sport:checked ~ figure img:not(.sport) { opacity: 0; position: absolute; top: 0; left: 50%;} input#cats:checked ~ figure img.cats { width: 250px;} input#cats:checked ~ figure img:not(.cats) { opacity: 0; position: absolute; top: 0; left: 50%;} input#moda:checked ~ figure img.moda { width: 250px; } input#moda:checked ~ figure img:not(.moda) { opacity: 0; position: absolute; top: 0; left: 50%;} input#x:checked ~ figure img { width:0; opacity:0; transition: .5s; webkit-transition: .5s;} input#todo:checked ~ figure img { width: 160px; display: inline-block; margin: 15px 0 0 0; border-radius: 3px; 0 0 4px rgba(0, 0, 0, 0.2), 0 15px 15px -12px rgba(0, 0, 0, 0.45); border-top: 1px solid #e0e0e0; } input[type=radio] { display: none; } label { position: relative; padding:.5rem; border-radius: 3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); border: 1px solid rgba(0,0,0,.1); display: inline-block; margin: 15px 1px 0 0; background: #eee; } label:hover { cursor: pointer; background: #e5e5e5; color: tomato; transition: .4s;} input#x + label {padding:5px; border-radius: 50%; background: #eee; color: #999; font-size: 1.5rem; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 8px -4px rgba(0, 0, 0, 0.45) inset; } input#x + label:hover, input#x:checked + label {background: tomato; color: #fff; transition: .4s;} input:checked + label { background: rgba(0, 0, 0, 0.25); text-shadow: 0 0 1px #222222; color: #fff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 8px -4px rgba(0, 0, 0, 0.45); border-color: #fff;} Selecciona 1 categoría Naturaleza Deportes Gatos Moda Todo ×
