Filtro de galería

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

14 October 2023

Página de inicio del complemento Matrix

27 November 2024

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

Panel de tarjetas

Página de inicio del complemento Matrix

Productos de tarjetas

HTML

CSS

JS

Recomendado

Panel de tarjetas

Página de inicio del complemento Matrix

Productos de tarjetas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS