The web site of sploutch

Petite galerie d'image avec effet au survole de votre souris
Testé et installé by Sploutch - tutoriels.xooit

Voici ci-dessous un exemple en situation. Il vous suffira de passer votre souris sur une imaget, pour vous rendre comptes des effets.

Si cet effet vous plait, copier/coller ci-dessous les codes pour cette exemple. Vous devrez bien sur changer les url des images !

Vous pouvez bien sur nous faire un petit don, pour nous remercier !

Le CSS

/******DEBUT DU CODE CSS POUR EXEMPLE (https://forumtutorielssupports.xoo.it/index.php)******/

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:700);
h1 {
   font-family: 'Roboto Condensed', sans-serif;
   color: #FFF;
   font-size: 2.3em;
}

em {
   color: #232027;
}

.Sploutch {
   width: 40%;
   margin: 40px auto;
}

div.GallerieImag {
   margin-top: 30px;
}

div.GallerieImag ul {
   list-style-type: none;
   margin-left: 35px;
}

/* animation */
div.GallerieImag ul li, div.GallerieImag li img {
   -webkit-transition: all 0.1s ease-in-out;
     -moz-transition: all 0.1s ease-in-out;
     -o-transition: all 0.1s ease-in-out;
     transition: all 0.1s ease-in-out;
}

div.GallerieImag ul li {
   position: relative;
   float: left;
   width: 130px;
   height: 130px;
   margin: 5px;
   padding: 5px;
   z-index: 0;
}

/* Make sure z-index is higher on hover */
/* Ensure that hover image overlapped the others */
div.GallerieImag ul li:hover {
   z-index: 5;
}

/* Image is position nicely under li */
div.GallerieImag ul li img {
   position: absolute;
   left: 0;
   top: 0;
   border: 1px solid #dddddd;
   padding: 5px;
   width: 130px;
   height: 130px;
   background: #f0f0f0;
}

div.GallerieImag ul li img:hover {
   width: 200px;
   height: 200px;
   margin-top: -130px;
   margin-left: -130px;
   top: 65%;
   left: 65%;
}

p.attribution {
   font-family: 'Consolas';
   color: #000;
   clear: both;
   text-align: center;
   line-height: 25px;
   padding-top: 30px;
}

p.attribution a {
   color: #4c8d7c;
}

/* Responsive hack */
@media only screen and (min-width: 499px) and (max-width: 1212px) {
   .Sploutch {
      width: 500px;
   }
}

@media only screen and (max-width: 498px) {
   .Sploutch {
      width: 300px;
   }

div.GallerieImag ul {
      list-style-type: none;
      margin: 0;
   }
}

/******FIN DU CODE CSS POUR EXEMPLE (https://forumtutorielssupports.xoo.it/index.php)******/

Le code HTML

<div class="Sploutch">
      <div class="GallerieImag">
         <ul>
            <li><img src="http://img.xooimage.com/files6/3/c/5/gnomes-ff7c227032-15fbd4f.png"></li>
            <li><img src="http://img.xooimage.com/files115/9/9/7/gnomes-56d4620.png"></li>
            <li><img src="http://img.xooimage.com/files113/0/c/f/gnomesbleu-571db32.png"></li>
            <li><img src="http://img.xooimage.com/files110/d/f/a/halloween_0022-5673112.png"></li>
            <li><img src="http://img.xooimage.com/files114/3/2/4/emo_coolbleu-56a1f84.png"></li>
            <li><img src="http://img.xooimage.com/files110/f/5/e/smiley-vert-56730df.png"></li>
            <li><img src="http://img.xooimage.com/files22/9/a/a/9aa62a35d1249ccf0...f2fa847f-100be67.png"></li>
            <li><img src="http://img.xooimage.com/files114/c/f/9/gre-569c783.png"></li>
            <li><img src="http://img.xooimage.com/files110/5/2/4/purzen_scary_face-56730de.png"></li>
                                <li><img src="http://img.xooimage.com/files6/2/d/7/sploutchavatarwk6-983ca.png"></li>
         </ul>
      </div>

</div>