Filtre de galerie

1630 Andev.web

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

27 October 2023

Jeu de Tetris simple

10 January 2026

Modèle HTML du panneau d'administration visiteur

16 January 2026

Modèle HTML de joueur de jeu Ruffle Flash

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

Recommandé

Jeu de Tetris simple

Modèle HTML du panneau d'administration visiteur

Modèle HTML de joueur de jeu Ruffle Flash

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS