The web site of sploutch

Haut de page

Bas de page

Le diaporama de 4 images avec effet au survole de la souris
Testé et installé by Sploutch - tutoriels.xooit

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

Forum

Tutoriels

xooit

By Sploutch

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)******/
/************************DEBUT DU CODE CSS DIAPO 4 IMAGES AVEC EFFET HOVER (https://forumtutorielssupports.xoo.it/index.php)************************/

.DiapoHover {
  display: flex;
  width: 100%;
  padding: 4% 2%;
  box-sizing: border-box;
  height: 100vh;
}

.Sploutch {
  flex: 1;
  overflow: hidden;
  transition: .5s;
  margin: 0 2%;
  box-shadow: 0 20px 30px rgba(0,0,0,.1);
  line-height: 0;
}

.Sploutch > img {
  width: 200%;
  height: calc(100% - 10vh);
  object-fit: cover; 
  transition: .5s;
}

.Sploutch > span {
  font-size: 3.8vh;
  display: block;
  text-align: center;
  height: 10vh;
  line-height: 2.6;
}

.Sploutch:hover { flex: 1 1 50%; }
.Sploutch:hover > img {
  width: 100%;
  height: 100%;
}

/************************FIN DU  CODE CSS DIAPO 4 IMAGES AVEC EFFET HOVER  (https://forumtutorielssupports.xoo.it/index.php)************************/

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

Le code HTML