Filtro de galería

1,710 Andev.web

Abrir en el editor Publica tu código

Recomendado

1 March 2025

Barra de navegación moderna HTML CSS

16 November 2024

Cómo crear una barra lateral de cuadrícula en CSS

20 April 2026

Animación del CSS de los botones

HTML

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