Gallery Filter

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Catamaran:wght@100..900&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/css/uikit.min.css" />

<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit-icons.min.js"></script><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/7.2.0/mdb.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="main-content">
  <div uk-filter="target: .js-filter">

<ul class="uk-navbar-nav">
        <li class="uk-active" uk-filter-control><a href="#">All</a></li>
        <li uk-filter-control="[data-num='1']"><a href="#">DOG</a></li>
        <li uk-filter-control="[data-num='2']"><a href="#">CAT</a></li>
        <li uk-filter-control="[data-num='3']"><a href="#">OTHERS</a></li>
    </ul>

<ul class="img-gallery-container js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid>
        <li data-num="2">
            <img src="https://cdn.pixabay.com/photo/2022/09/17/17/32/cat-7461440_1280.jpg" alt="" class="img-gal">
            <div class="float-gallery-content">
                <div class="content uk-text-left">
                    <span class="highlight uk-block">Cat | Milo </span>
                    <a href="#"> Playful and affectionate</a>
                </div>
                <div class="content-btn">
                    <button type="button">
                        →
                    </button>
                </div>
            </div>
        </li>
        <li data-num="1">
            <img src="https://cdn.pixabay.com/photo/2022/09/15/17/55/dog-7456991_640.jpg" alt="" class="img-gal">
          <div class="float-gallery-content">
                <div class="content uk-text-left">
                    <span class="highlight uk-block">Dog | Rex</span>
                    <a href="#">Loyal and protective</a>
                </div>
                <div class="content-btn">
                    <button type="button">
                        →
                    </button>
                </div>
            </div>
        </li>
        <li data-num="1">
            <img src="https://cdn.pixabay.com/photo/2022/09/05/20/46/cute-dog-7435167_960_720.jpg" alt="" class="img-gal">
          <div class="float-gallery-content">
                <div class="content uk-text-left">
                    <span class="highlight uk-block">Dog | Bella </span>
                    <a href="#">Sweet and energetic</a>
                </div>
                <div class="content-btn">
                    <button type="button">
                        →
                    </button>
                </div>
            </div>
        </li>
        <li data-num="1">
            <img src="https://cdn.pixabay.com/photo/2022/09/05/20/46/cute-dog-7435166_960_720.jpg" alt="" class="img-gal">
          <div class="float-gallery-content">
                <div class="content uk-text-left">
                    <span class="highlight uk-block">Dog | Max</span>
                    <a href="#">Friendly and devoted</a>
                </div>
                <div class="content-btn">
                    <button type="button">
                        →
                    </button>
                </div>
            </div>
        </li>
        <li data-num="2">
            <img src="https://cdn.pixabay.com/photo/2022/09/04/20/15/cat-7432690_1280.jpg" alt="" class="img-gal">
          <div class="float-gallery-content">
                <div class="content uk-text-left">
                    <span class="highlight uk-block">Cat | Luna </span>
                    <a href="#">Elegant and curious</a>
                </div>
                <div class="content-btn">
                    <button type="button">
                        →
                    </button>
                </div>
            </div>
        </li>
        <li data-num="2">
            <img src="https://cdn.pixabay.com/photo/2022/09/04/20/32/cat-7432703_960_720.jpg" alt="" class="img-gal">
          <div class="float-gallery-content">
                <div class="content uk-text-left">
                    <span class="highlight uk-block">Cat | Simba </span>
                    <a href="#">Brave and mischievous</a>
                </div>
                <div class="content-btn">
                    <button type="button">
                        →
                    </button>
                </div>
            </div>
        </li>
        <li data-num="1">
            <img src="https://cdn.pixabay.com/photo/2022/09/20/21/54/fox-7468838_1280.jpg" alt="" class="img-gal">
          <div class="float-gallery-content">
                <div class="content uk-text-left">
                    <span class="highlight uk-block">Dog | Ringo </span>
                    <a href="#">Cunning and agile</a>
                </div>
                <div class="content-btn">
                    <button type="button">
                        →
                    </button>
                </div>
            </div>
        </li>
        <li data-num="3">
            <img src="https://cdn.pixabay.com/photo/2024/02/20/10/19/ai-generated-8585127_1280.jpg" alt="" class="img-gal">
          <div class="float-gallery-content">
                <div class="content uk-text-left">
                    <span class="highlight uk-block">Rabbit | Nube</span>
                    <a href="#">Gentle and playful</a>
                </div>
                <div class="content-btn">
                    <button type="button">
                        →
                    </button>
                </div>
            </div>
        </li>
        <li data-num="3">
            <img src="https://cdn.pixabay.com/photo/2023/04/21/16/24/ai-generated-7942231_960_720.jpg" alt="" class="img-gal">
          <div class="float-gallery-content">
                <div class="content uk-text-left">
                    <span class="highlight uk-block">Ant | Nano</span>
                    <a href="#">Diligent and tiny</a>
                </div>
                <div class="content-btn">
                    <button type="button">
                        →
                    </button>
                </div>
            </div>
        </li>
    </ul>

</div>
</div>  
</body>
</html>

CSS

body {
     background-color: #F7F8F8;
     min-height: 100vh;
}
 .main-content > div {
     width: 70%;
}
 .main-content {
     display: flex;
     justify-content: center;
     text-align: center;
     padding-top: 50px;
     padding-bottom: 50px;
}
 .uk-navbar-nav {
     justify-content: center;
     font-family: "Catamaran", sans-serif;
     gap: 15px;
     margin-bottom: 35px;
}
 .uk-navbar-nav > li {
     padding: 0;
     min-width: 100px;
}
 .uk-navbar-nav>li>a {
     padding: 15px 35px;
     display: block;
     background-color: #fff;
     color: #222;
     font-size: 15px;
     min-height: auto;
     font-weight: 600;
     box-shadow: 0 0 25px #cccccc42;
     border-radius: 7px;
     transition: 0.5s all ease-in-out;
}
 .uk-navbar-nav>li>a:hover, .uk-navbar-nav>li.uk-active>a {
     background-color: #7B68EE;
     color: #fff;
}
 .img-gallery-container > li {
     position: relative;
     padding: 10px;
     margin-top: 5px !important;
}
 .img-gal {
     height: 415px;
     width: 100%;
     object-fit: cover;
     transition: 0.5s all ease-in-out;
     border-radius: 6px;
}
 .img-gallery-container > li:hover > img {
     filter: brightness(0.4) blur(3px);
}
 .float-gallery-content {
     position: absolute;
     width: 90%;
     z-index: -1;
     background: #fff;
     padding: 0;
     margin: 0 auto;
     left: 0;
     right: 0;
     bottom: 0;
     border-radius: 5px;
     display: flex;
     justify-content: space-between;
     opacity: 0;
     visibility: hidden;
     transition: 0.3s all ease-in-out;
     overflow: hidden;
}
 .img-gallery-container > li:hover .float-gallery-content {
     bottom: 20px;
     opacity: 1;
     visibility: visible;
     z-index: 9;
}
 .uk-block {
     display: block;
}
 .float-gallery-content .content {
     padding: 8px 15px;
}
 .float-gallery-content .content > a {
     color: #212121;
     position: relative;
     bottom: -50px;
     opacity: 0;
     transition: all 0.5s;
}
 .float-gallery-content .content > a:hover {
     color: #7B68EE;
}
 button {
     border: 0;
     height: 100%;
     padding: 5px 15px;
     background: #7B68EE;
     font-size: 30px;
     color: #fff;
     position: relative;
     right: -100px;
     opacity: 0;
     transition: all 0.5s;
}
 .highlight {
     color:#7B68EE;
     font-weight: 600;
     position: relative;
     left: -100px;
     opacity: 0;
     transition: all 0.5s;
}
 .img-gallery-container > li:hover .highlight {
     left: 0;
     opacity: 1;
     transition-delay: 0.1s;
}
 .img-gallery-container > li:hover button {
     right: 0;
     opacity: 1;
     transition-delay: 0.1s;
}
 .img-gallery-container > li:hover .content > a {
     bottom: 0;
     opacity: 1;
     transition-delay: 0.1s;
}
 @media screen and (max-width: 1100px) {
     .img-gal {
         height: 300px;
    }
}
 @media screen and (max-width: 650px) {
     .img-gal {
         height: 225px;
    }
}
 @media screen and (max-width: 480px) {
     .img-gal {
         height: 125px;
    }
}

Gallery Filter

Recommended

League of legends slider gallery

Gallery of sites with hover and blur effect

CSS Filter cards

HTML

CSS

JS

Recommended

League of legends slider gallery

Gallery of sites with hover and blur effect

CSS Filter cards

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS