Close Menu

    Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    How to make Happy birthday cake Animation using HTML & CSS

    29 May 2025

    How to create Toast Catcher Game using HTML CSS and JS

    26 May 2025

    How to create Animated No Chill Login form using HTML CSS and JS

    22 May 2025
    Facebook X (Twitter) Instagram YouTube Telegram Threads
    Coding StellaCoding Stella
    • Home
    • Blog
    • HTML & CSS
      • Login Form
    • JavaScript
    • Hire us!
    Coding StellaCoding Stella
    Home - HTML & CSS - How to make Gallery Filter – UI Kit using HTML & CSS
    HTML & CSS

    How to make Gallery Filter – UI Kit using HTML & CSS

    Coding StellaBy Coding Stella27 May 2024No Comments6 Mins Read
    Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Email WhatsApp Copy Link

    Let’s create a Gallery Filter UI Kit using HTML and CSS. This project will allow users to filter and view gallery items based on categories, providing an interactive and organized way to display images or other content.

    We’ll use HTML to structure the gallery and CSS to style it and handle the filtering effect.

    Let’s dive into building the Gallery Filter UI Kit. Whether you’re a beginner or an experienced developer, this project offers a practical way to enhance your web design skills and create a polished, user-friendly interface for displaying content. Let’s get started!

    HTML :

    This HTML document creates a gallery with a filter feature using the UIkit framework. It includes links to external CSS and JS files for fonts and UIkit components. The gallery has a navigation bar with filter options (“All”, “DOG”, “CAT”, “ANT & RABBIT”). Each gallery item is a list element containing an image and some descriptive text with a button. The images are categorized using a data-num attribute, and clicking a filter option updates the displayed images to match the selected category. The UIkit library handles the filtering and grid layout functionality.

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>Gallery Filter - UI Kit</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">
    <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/css/uikit.min.css" />
    
    <!-- UIkit JS -->
    <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>
    <!-- partial:index.partial.html -->
    <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="#">ANT & RABBIT</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">App Store | Social Media</span>
                        <a href="#">Creative Web Design</a>
                    </div>
                    <div class="content-btn">
                        <button type="button">
                            &#8594;
                        </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">App Store | Social Media</span>
                        <a href="#">Creative Web Design</a>
                    </div>
                    <div class="content-btn">
                        <button type="button">
                            &#8594;
                        </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">App Store | Social Media</span>
                        <a href="#">Creative Web Design</a>
                    </div>
                    <div class="content-btn">
                        <button type="button">
                            &#8594;
                        </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">App Store | Social Media</span>
                        <a href="#">Creative Web Design</a>
                    </div>
                    <div class="content-btn">
                        <button type="button">
                            &#8594;
                        </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">App Store | Social Media</span>
                        <a href="#">Creative Web Design</a>
                    </div>
                    <div class="content-btn">
                        <button type="button">
                            &#8594;
                        </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">App Store | Social Media</span>
                        <a href="#">Creative Web Design</a>
                    </div>
                    <div class="content-btn">
                        <button type="button">
                            &#8594;
                        </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">App Store | Social Media</span>
                        <a href="#">Creative Web Design</a>
                    </div>
                    <div class="content-btn">
                        <button type="button">
                            &#8594;
                        </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">App Store | Social Media</span>
                        <a href="#">Creative Web Design</a>
                    </div>
                    <div class="content-btn">
                        <button type="button">
                            &#8594;
                        </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">App Store | Social Media</span>
                        <a href="#">Creative Web Design</a>
                    </div>
                    <div class="content-btn">
                        <button type="button">
                            &#8594;
                        </button>
                    </div>
                </div>
            </li>
        </ul>
    
    </div>
    </div>
    <!-- partial -->
      
    </body>
    </html>
    

    CSS :

    This CSS code styles a webpage with a gallery filter feature. The overall background color is light grey, and the main content is centered and padded. The navigation bar is centered and uses the “Catamaran” font, with buttons styled to look like boxes with shadow effects that change color on hover. The content box includes a highlighted span and a link, both of which animate into view with a delay. This creates an interactive and visually appealing gallery with smooth transitions and responsive design elements.

    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;
        }
    }

    In conclusion, creating a Gallery Filter UI Kit using HTML and CSS has been a rewarding project that enhances web design skills. By structuring the gallery with HTML and styling it with CSS, we’ve built an interactive and organized way to display and filter content. This project is perfect for showcasing images or other items in a user-friendly and visually appealing manner.

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous ArticleHow to makeĀ Music Player with Slider | Swiper JS using HTML CSS & JavaScript
    Next Article How to make Hi-Tech Notification Button using HTML & CSS
    Coding Stella
    • Website

    Related Posts

    HTML & CSS

    How to make Happy birthday cake Animation using HTML & CSS

    29 May 2025
    HTML & CSS

    How to make Social media icons hover effect using HTML & CSS

    14 May 2025
    HTML & CSS

    How to make Awesome Radar Animation using HTML & CSS

    8 May 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202419K Views

    How to make Modern Login Form using HTML & CSS | Glassmorphism

    11 January 202416K Views

    How to make I love you Animation in HTML CSS & JavaScript

    14 February 202414K Views

    How to make Valentine’s Day Card using HTML & CSS

    13 February 202412K Views
    Follow Us
    • Instagram
    • Facebook
    • YouTube
    • Twitter
    ads
    Featured Post

    How to make Flip A Coin using HTML CSS & JavaScript

    11 April 2024

    How to make Netflix Login page using HTML & CSS

    14 January 2024

    How to make Magic Social Share Menu using HTML CSS and JS

    14 April 2025

    How to Make Login Form with Captcha in HTML, CSS & JavaScript

    11 January 2024
    Latest Post

    How to make Happy birthday cake Animation using HTML & CSS

    29 May 2025

    How to create Toast Catcher Game using HTML CSS and JS

    26 May 2025

    How to create Animated No Chill Login form using HTML CSS and JS

    22 May 2025

    How to make Social media icons hover effect using HTML & CSS

    14 May 2025
    Facebook X (Twitter) Instagram YouTube
    • About Us
    • Privacy Policy
    • Return and Refund Policy
    • Terms and Conditions
    • Contact Us
    • Buy me a coffee
    © 2025 Coding Stella. Made with šŸ’™ by @coding.stella

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Looks like you're using an ad blocker. We rely on advertising to help fund our site.
    Okay! I understood