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 Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

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 mosaique : fluide et responsive</h1>

<div class="img-gal-container">
  <a class="mos-s1 fleft" href="https://feimosi.github.io/baguetteBox.js/img/medium/2-1.jpg" title="Galerie 1 - Image caption1 description dans title">    
    <figure>
        <img width="700" height="525" src="http://lorempixel.com/700/525/people" alt="" />
    </figure>
    <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>
  </a>
  <a class="mos-s1 fleft" href="https://feimosi.github.io/baguetteBox.js/img/medium/2-1.jpg" title="Galerie 1 - Image caption1 description dans title">    
    <figure>
        <img width="700" height="525" src="http://lorempixel.com/700/525/people" alt="" />
    </figure>
    <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>
  </a>
  <a class="mos-b1 fright end" href="https://feimosi.github.io/baguetteBox.js/img/medium/2-1.jpg" title="Galerie 1 - Image caption1 description dans title">    
    <figure>
        <img width="700" height="525" src="http://lorempixel.com/700/525/people" alt="" />
    </figure>
    <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>
  </a>


  <a class="mos-b1 fleft" href="https://feimosi.github.io/baguetteBox.js/img/medium/2-1.jpg" title="Galerie 1 - Image caption1 description dans title">    
    <figure>
        <img width="700" height="525" src="http://lorempixel.com/700/525/people" alt="" />
    </figure>
    <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>
  </a>
  <a class="mos-s1 fleft" href="https://feimosi.github.io/baguetteBox.js/img/medium/2-1.jpg" title="Galerie 1 - Image caption1 description dans title">    
    <figure>
        <img width="700" height="525" src="http://lorempixel.com/700/525/people" alt="" />
    </figure>
    <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>
  </a>
  <a class="mos-s1 fright end" href="https://feimosi.github.io/baguetteBox.js/img/medium/2-1.jpg" title="Galerie 1 - Image caption1 description dans title">    
    <figure>
        <img width="700" height="525" src="http://lorempixel.com/700/525/people" alt="" />
    </figure>
    <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>
  </a>

  <a class="mos-m1 fleft" href="https://feimosi.github.io/baguetteBox.js/img/medium/2-1.jpg" title="Galerie 1 - Image caption1 description dans title">    
    <figure>
        <img width="700" height="525" src="http://lorempixel.com/700/525/people" alt="" />
    </figure>
    <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>
  </a>
  <a class="mos-m1 fleft" href="https://feimosi.github.io/baguetteBox.js/img/medium/2-1.jpg" title="Galerie 1 - Image caption1 description dans title">    
    <figure>
        <img width="700" height="525" src="http://lorempixel.com/700/525/people" alt="" />
    </figure>
    <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>
  </a>
  <a class="mos-m1 fright end" href="https://feimosi.github.io/baguetteBox.js/img/medium/2-1.jpg" title="Galerie 1 - Image caption1 description dans title">    
    <figure>
        <img width="700" height="525" src="http://lorempixel.com/700/525/people" alt="" />
    </figure>
    <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>
  </a>

  <a class="mos-x1 end last" href="https://feimosi.github.io/baguetteBox.js/img/medium/2-1.jpg" title="Galerie 1 - Image caption1 description dans title">    
    <figure>
        <img width="700" height="525" src="http://lorempixel.com/700/525/people" alt="" />
    </figure>
    <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>
  </a>  


</div>
            
          
!
            
              /*!----------------------------------------------*\
/* VARIABLES CSS                                 *|
/*-----------------------------------------------*/
:root {
  /* Container galerie : parent */
  --gal-max-width: 700px;
  --gal-bg-color: red;
  
  /* 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;  
}

/*!----------------------------------------------*\
/* GALERIE IMAGE                                 *|
/*-----------------------------------------------*/
.img-gal-container{
  /* pas de flex pour commencer */
   display:block;
    
    font-size: 0;  
    margin: 0 auto;
    text-align: center;
    
    /* Paramétres */
    max-width: var(--gal-max-width);
    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;
   /* ombre sur hover et gestion des marges */
    transition: all 300ms 1ms linear;  
}


/* 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));    
    */
}

/**************************************
/* Différence avec la galerie simple*/
/**************************************/
.img-gal-container a{
  margin: 0 8px 8px 0;
}

.img-gal-container .fleft{display:block;float:left;}
.img-gal-container .fright{display:block;float:right;}
.img-gal-container .end{margin-right:0;}
.img-gal-container .last{margin-bottom:0;}
.img-gal-container img{max-width:100%;vertical-align:top;}
.img-gal-container:after{content:"";display:table;clear:both;}
.img-gal-container .mos-x1{clear:both;width:700px;height:525px;}
.img-gal-container .mos-s1{width:169px;height:127px;}
.img-gal-container .mos-b1{width:346px;height:260px;}
.img-gal-container .mos-m1{width:228px;height:171px;}
.img-gal-container .mos-b2{width:464px;height:348px;}
.img-gal-container .mos-m2{width:228px;height:170px;}

/* Point de rupture = largeur du container de la galerie + 100  */
/*800px*/
@media screen and (max-width: 50em) {

  .img-gal-container{
      display:flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
  }

  .img-gal-container .mos-x1,
  .img-gal-container .mos-s1,
  .img-gal-container .mos-b1,
  .img-gal-container .mos-m1,
  .img-gal-container .mos-b2,
  .img-gal-container .mos-m2{
    float:none;
    width:100%;
    height:auto;
    margin: 0 0 1% 0;
    /* 2 images par rangée */
    flex-basis: 49.5%;    
  }
  .img-gal-container:after{
    display:none;
  }

}

/* 400px */
@media screen and (max-width: 25em) {

    /* toutes les 3eme images sont à 100% à partir de la première */
    .img-gal-container a:nth-of-type(3n+1){
        flex-basis: 100%;
    }

}

            
          
!
            
              /*
Galerie : https://codepen.io/DjF/pen/bRvBQx
*/
            
          
!
999px
Loading ..................

Console