Filtro de galería

Abrir en el editor Video Publica tu código

Recomendado

12 April 2025

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

Filtro de galería

Recomendado

Un código de Farah

Un código de ByBy.inc

Un código de Mete

HTML

CSS

JS

Recomendado

Un código de Farah

Un código de ByBy.inc

Un código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS