비전공자 개발일기

Filter Gallery 본문

HTML _CSS

Filter Gallery

HiroDaegu 2022. 11. 7. 00:49
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FILTER GALLERY</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>FILTER GALLERY</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="http://farm8.staticflickr.com/7254/7740405218_deedfa35cb_t.jpg" />
      </li>
      <li class="desert-item">
        <img src="http://farm5.staticflickr.com/4086/4964465857_0bdbe1a84c_t.jpg" />
      </li>
      <li class="lightning-item">
        <img src="http://farm6.staticflickr.com/5114/5858971312_0fec4bdaa0_t.jpg" />
      </li>
      <li class="desert-item">
        <img src="http://farm8.staticflickr.com/7338/12111748274_e3319bfbd5_t.jpg" />
      </li>
      <li class="animals-item">
        <img src="http://farm7.staticflickr.com/6206/6105317674_80f67a9a5e_t.jpg" />
      </li>
      <li class="lightning-item">
        <img src="http://farm4.staticflickr.com/3130/2840585154_232b19bfbd_t.jpg" />
      </li>
      <li class="animals-item">
        <img src="http://farm9.staticflickr.com/8239/8548052436_a36e792c85_t.jpg" />
      </li>
      <li class="lightning-item">
        <img src="http://farm1.staticflickr.com/129/390350345_a0a04a139d_t.jpg" />
      </li>
    </ul>    
</body>
</html>
body {
    margin: auto;
    background: orange;
    width: 353px;
    font-family: "Arial"
}

h2 {
    text-align: center;
}

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;
}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Responsive Services Section  (0) 2022.11.11
Main Page in WEB  (0) 2022.11.10
Typing Effect  (0) 2022.11.06
Circle Scroll  (0) 2022.11.05
Hidden Search Bar  (0) 2022.11.02
'HTML _CSS' Related Articles more