cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">
    <symbol id="ico-plus" viewBox="0 0 24 24"><title>icone plus</title><desc>Icone agrandir</desc><path fill="none" d="M12 0v24M24 12H0"/></symbol>
</svg>

<h1>Galerie flex : fluide et responsive</h1>

<div id="img-gal-container" class="img-gal-container animated-fadeIn">

    <a class="cssHide" href="https://feimosi.github.io/baguetteBox.js/img/1-1.jpg" data-caption="Galerie 2 - Image caption">    
        <figure>
            <img width="320" height="188" src="http://lorempixel.com/320/188/people" alt="" />
        </figure>
        <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>
    </a>

    <a class="cssHide" href="https://feimosi.github.io/baguetteBox.js/img/1-2.jpg" data-caption="Image caption2">    
        <figure>
            <img width="320" height="350" src="http://lorempixel.com/320/350/fashion" alt="" />            
        </figure>
        <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>        
    </a>

    <a class="cssHide" href="https://feimosi.github.io/baguetteBox.js/img/1-3.jpg" data-caption="Image caption3">    
        <figure>
            <img width="320" height="188" src="http://lorempixel.com/320/188/nightlife" alt="" />
        </figure>
        <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>        
    </a>


     <a class="cssHide" href="https://feimosi.github.io/baguetteBox.js/img/1-4.jpg" data-caption="Image caption4">    
        <figure>
            <img width="320" height="350" src="http://lorempixel.com/320/350/people" alt="" />     
        </figure>
        <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>   
    </a>

    <a class="cssHide" href="https://feimosi.github.io/baguetteBox.js/img/1-5.jpg" data-caption="Image caption5">    
        <figure>
            <img width="320" height="188" src="http://lorempixel.com/320/188/cats" alt="" />
        </figure>
        <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>           
    </a>    

    <a class="cssHide" href="https://feimosi.github.io/baguetteBox.js/img/1-6.jpg" data-caption="Image caption6">    
        <figure>
            <img width="320" height="188" src="http://lorempixel.com/320/188/city" alt="" />
        </figure>
        <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>           
    </a>    

    <a class="cssHide" href="https://feimosi.github.io/baguetteBox.js/img/1-7.jpg" data-caption="Image caption7">    
        <figure>
            <img width="320" height="188" src="http://lorempixel.com/320/188/fashion" alt="" />
        </figure>
        <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>           
    </a>    

    <a class="cssHide" href="https://feimosi.github.io/baguetteBox.js/img/1-8.jpg" data-caption="Image caption8">    
        <figure>
            <img width="320" height="188" src="http://lorempixel.com/320/188/technics" alt="" />
        </figure>
        <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>           
    </a>    

    <a class="cssHide" href="https://feimosi.github.io/baguetteBox.js/img/small/4-3.jpg" >
        <figure>
            <img width="320" height="188" src="http://lorempixel.com/320/188/food" alt="" />
        </figure>
        <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>           
    </a>        
    
     <a class="cssHide" href="https://feimosi.github.io/baguetteBox.js/img/small/4-2.jpg" >
        <figure>
            <img width="320" height="188" src="http://lorempixel.com/320/188/city" alt="" />
        </figure>
        <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>           
    </a>    

    <a class="cssHide" href="https://feimosi.github.io/baguetteBox.js/img/small/4-1.jpg" >
        <figure>
            <img width="320" height="188" src="http://lorempixel.com/320/188/transport" alt="" />
        </figure>
        <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>           
    </a>    

    <a class="cssHide" href="https://feimosi.github.io/baguetteBox.js/img/medium/2-4.jpg">    
        <figure>
            <img width="320" height="188" src="http://lorempixel.com/320/188/business" alt="" />
        </figure>
        <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>           
    </a>    

    <a class="cssHide" href="https://feimosi.github.io/baguetteBox.js/img/medium/2-3.jpg">    
        <figure>
            <img width="320" height="188" src="http://lorempixel.com/320/188/animals" alt="" />
        </figure>
        <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>           
    </a>            
    <a class="cssHide" href="https://feimosi.github.io/baguetteBox.js/img/medium/2-2.jpg">    
        <figure>
            <img width="320" height="188" src="http://lorempixel.com/320/188/nature" alt="" />
        </figure>
        <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>           
    </a>    

    <a class="cssHide" href="https://feimosi.github.io/baguetteBox.js/img/medium/2-1.jpg">    
        <figure>
            <img width="320" height="188" src="http://lorempixel.com/320/188/sports" alt="" />
        </figure>
        <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>           
    </a>       

    <a class="cssHide" href="https://feimosi.github.io/baguetteBox.js/img/medium/2-1.jpg">    
        <figure>
            <img width="320" height="188" src="http://lorempixel.com/320/188/sports" alt="" />
        </figure>
        <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>           
    </a>          
     
    <a class="cssHide" href="https://feimosi.github.io/baguetteBox.js/img/1-1.jpg" data-caption="Galerie 2 - Image caption">    
        <figure>
            <img width="320" height="188" src="http://lorempixel.com/320/188/people" alt="" />
        </figure>
        <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>
    </a>
  
</div>

            
          
!
            
              /*!----------------------------------------------*\
/* VARIABLES CSS                                 *|
/*-----------------------------------------------*/
:root {
  /* Début paramétrage */  
  
  /* Container galerie : parent */
  --gal-max-widthPx:760px;
  --gal-max-width: 760;
  --gal-bg-color: red;
  
  /* Contenu galerie : enfant a */
  /* taille maxi d'occupation des images en pixels */
  --img-max-width:248;
  --img-marge:8;
  
  /* Media querie en pixel */
  --gal-mq:600;
  
  /* paramétres divers effets sur images */
  --gal-img-bkg:green;
  --gal-img-svg-stroke:#fff;  
  --gal-img-svg-fill:#fff;
  --gal-img-hover-background-begin:black;  
  --gal-img-hover-background-end:red;  
 
  /* Fin paramétrage */
  
  
  --gal-img-width: calc( ( var(--img-max-width) / var(--gal-max-width) ) * 100% );
  --gal-marge-width: calc( ( var(--img-marge) / var(--gal-max-width) ) * 100% );
  
  /* Media-querie*/
  --gal-img-width-mq1: calc( ( 296 / var(--gal-mq) ) * 100% );
  --gal-marge-width-mq1: calc( ( 8 / var(--gal-mq) ) * 100% ); 
}

/*!----------------------------------------------*\
/* GALERIE IMAGE                                 *|
/*-----------------------------------------------*/
.img-gal-container{
    display:flex;
    flex-wrap: wrap;
    align-items: flex-start;
    
    font-size: 0;  
    margin: 0 auto;
    text-align: center;
    
    /* Paramétres */
    max-width:calc((var(--gal-max-width) * 1px));
    background-color: var(--gal-bg-color);
}

/*reset*/
.img-gal-container a,
.img-gal-container figure{
    margin: 0;
    padding: 0;
    /*https://blog.goetter.fr/2015/10/30/flexbox-a-casse-mes-images-responsive/*/
    overflow: hidden;
}
/* Lien image Paysage et Portrait */
.img-gal-container a{
    display:block;
    position:relative;
    transition: box-shadow .5s;
    /* Paramétres */
    /* marge entre les images*/
    margin:0 var(--gal-marge-width) 1% 0;
    /* Ne peuvent pas grandir, peuvent retrecir, 3 images par rangée */
    flex:0 1 var(--gal-img-width);

   /* ombre sur hover et gestion des marges */
    transition: all 300ms 1ms linear;  
}
/* sup marge de toutes les dernières images de rangée */
.img-gal-container a:nth-of-type(3n){
   margin-right:0;
 }
/* Habillage de la miniature avant son affichage
/* Visible pendant le téléchargement de la miniature
/* Fond avec svg appareil photo
/* image responsive*/
.img-gal-container img{
    display: block;
    margin: 0;
    width: 100%;
    height: auto;  
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 32" fill="#efefef"><path d="M39.5 6H32c-1.927 0-1.998-1.797-2-2V3c0-1.258-1.39-3-4-3h-9.97c-2.934 0-4 1.794-4 3v.994C12.03 4.076 11.984 6 10 6H2.5C1.12 6 0 7.122 0 8.5v18C0 27.878 1.12 29 2.5 29h6c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-6c-.827 0-1.5-.673-1.5-1.5V14h8c-.644 1.54-1 3.23-1 5 0 7.168 5.832 13 13 13s13-5.832 13-13c0-1.77-.36-3.46-1.003-5H41v12.5c0 .827-.673 1.5-1.5 1.5h-7c-.276 0-.5.224-.5.5s.224.5.5.5h7c1.38 0 2.5-1.122 2.5-2.5v-18C42 7.122 40.88 6 39.5 6zM21 31c-6.617 0-12-5.383-12-12S14.383 7 21 7s12 5.383 12 12-5.383 12-12 12zm11.75-18c-.074 0-.143.018-.206.047C30.38 8.867 26.022 6 21 6s-9.38 2.868-11.544 7.047c-.063-.03-.132-.047-.206-.047H1V8.5C1 7.673 1.673 7 2.5 7H10c2.368 0 3.02-1.958 3.03-3V3c0-.804.8-2 3-2H26c2.094 0 3 1.324 3 2v1c0 1.038.627 3 3 3h7.5c.827 0 1.5.673 1.5 1.5V13h-8.25zM9.5 5c.276 0 .5-.224.5-.5v-1C10 2.673 9.327 2 8.5 2h-4C3.673 2 3 2.673 3 3.5v1c0 .276.224.5.5.5s.5-.224.5-.5v-1c0-.276.225-.5.5-.5h4c.275 0 .5.224.5.5v1c0 .276.224.5.5.5zM21 10c-4.963 0-9 4.038-9 9s4.037 9 9 9 9-4.038 9-9-4.037-9-9-9zm0 17c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>') no-repeat center;
    background-size: 50% 50%;    

    /* Retour au zoom normal */
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;

    /* Paramétres */
    background-color: var(--gal-img-bkg);
}

/* Elements visibles sur le hover du lien */
/* Création d'un cadre dans l'image*/
.img-gal-container figure:after{
    display:none;
    content:'';
    z-index: 1;
    display: block;
    position: absolute;
    top: 5%;
    bottom: 5%;
    left: 4%;
    right: 4%;
}

.img-gal-container svg{
    display:block;
    position: absolute;
    top: 25%;
    left: 33%;
    width: 30%;
    height: 50%;

    /* positionné en haut à gauche de l'image, invisible avec echelle à 0 */
    /* pour le faire apparaitre à partir du centre : translate(0,0) */
    -webkit-transform: translate(-50%, -50%) scale(0);
    -ms-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    -webkit-transition: all 300ms 0ms linear;
    transition: all 300ms 0ms linear;

    /* Paramétres */        
    fill: var(--gal-img-svg-fill);
    stroke: var(--gal-img-svg-stroke);
}

/* EFFETS SUR HOVER DU LIEN */
.img-gal-container a:hover, 
.img-gal-container a:focus {
    cursor: -webkit-zoom-in;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

    /* idem box shadow mais avec acceleration graphique */
    /*https://css-tricks.com/almanac/properties/f/filter/*/
  /*-webkit-filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.7));
  filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.7));*/
}

.img-gal-container a:hover figure:after,
.img-gal-container a:focus figure:after{
    border-radius: 5px;    
    height:auto;
   /* Paramétres */    
    opacity: .6;
    background-color: var(--gal-img-hover-background-end);
    /*https://la-cascade.io/effets-dimages-css-3-les-vignettes/*/
    box-shadow:inset 0 0 100px var(--gal-img-hover-background-begin);
    /*background:radial-gradient(transparent,black),red;height:100%;*/
    background:radial-gradient(circle,transparent 50%,var(--gal-img-hover-background-begin) 150%),var(--gal-img-hover-background-end);

}

.img-gal-container a:hover svg,
.img-gal-container a:focus svg{
    z-index: 1;    

    -webkit-transform: translate(0, 0) scale(1);
    -ms-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    -webkit-transition: all 300ms 100ms linear;
    transition: all 300ms 100ms linear;
}

.img-gal-container a:hover img,
.img-gal-container a:focus img{
    /* zoom image */
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    
    /*noir et blanc*/
    -webkit-filter: grayscale(100%);
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter');
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);

    /* Paramétres transitions scale(1.1)*/
    -webkit-transition: all 400ms 100ms linear;
    transition: all 400ms 100ms linear;
}

/* EFFETS CLICK DU LIEN */
.img-gal-container a:active{
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    /*
    -webkit-filter:drop-shadow(0px 0px 0px rgba(0,0,0,0));    
    filter: drop-shadow(0px 0px 0px rgba(0,0,0,0.9));    
    */
}

/* 600px */
@media screen and (max-width: 37.5em) {
    .img-gal-container a{
       /* 2 images par rangée */
       flex-basis: var(--gal-img-width-mq1);
       /* marge entre les images*/
       margin-right:var(--gal-marge-width-mq1);      
    }       
    /* rétablir la marge droite de toutes les 3eme images des rangées */
    .img-gal-container a:nth-of-type(3n){
       margin-right:var(--gal-marge-width-mq1);    
    }
     /* sup la marge droite de toutes les 2eme images des rangées */
    .img-gal-container a:nth-of-type(2n){
     margin-right: 0;
    }  
}

/* 400px */
@media screen and (max-width: 25em) {
  .img-gal-container{
    justify-content:space-between;
  }
  .img-gal-container a{
     margin-right:0;
  }
    .img-gal-container a:nth-of-type(3n){
      margin-right:0;
    }  
    /* toutes les 5eme images sont à 100% à partir de la première */
    .img-gal-container a:nth-of-type(5n+1){
        flex-basis: 100%;
    }
  
}

            
          
!
            
              /*

Toute la théorie ici : http://blog.flds.fr/posts/galerie-images-display-flexbox/

Utiliser des variables comme valeur de media-querie voir : https://www.npmjs.com/package/postcss-media-variables

Mosaique : https://codepen.io/DjF/pen/rwdrpM
*/
            
          
!
999px
Loading ..................

Console