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">
→
</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">
→
</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">
→
</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">
→
</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">
→
</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">
→
</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">
→
</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">
→
</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">
→
</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!
