The web site of sploutch

Haut de page

Bas de page

Affichage de 4 images avec effet hover lors du survole
Testé et installé by Sploutch - tutoriels.xooit

Voici ci-dessous lors du survole de votre souris, un exemple du résultat. Affichage de 4 images en noir et blanc et deviendront en couleur lors du survole. Ces dernières présente une case pour les sélectionner individuellement les unes des autres dans l'angle en haut à gauche. Elles affichent aussi un reflet qui se modifie une fois l'image sélectionnée.

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

.images-selector input {
  position: absolute;
  z-index: 10;
}

.images-selector input:checked + .img-card {
  filter: none;
  transform: scaleY(1);
}

.img-card {
  display: inline-block;
  width: 250px;
  height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: all 200ms ease-in;
  filter: grayscale(1) opacity(.8);
}

.img-card:hover {
  filter: grayscale(0) opacity(1);
/*   box-shadow:  0px 8px 4px rgba(0, 0, 0, 0.3),
               0px 10px 2px rgba(0, 0, 0, 0.1); */
}

.img-card::before,
.img-card::after {
  transform: scaleY(-1);
}

/*reflection*/
.img-card:hover::after {
  content: '';
  background-image: inherit;
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
  width: inherit;
  height: 40%;
  position: absolute;
  bottom: -25%;
}

/*fade reflection*/
.img-card:hover::before {
  content: '';
  width: inherit;
  height: 42%;
  position: absolute;
  bottom: -25%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .9),rgba(255, 255, 255, .5));
  z-index: 1;
}

.img1 {
  background-image: url(URL DE VOTRE IMAGE ICI);
}

.img2 {
  background-image: url(URL DE VOTRE IMAGE ICI);
}

.img3 {
  background-image: url(URL DE VOTRE IMAGE ICI);
}

.img4 {
  background-image: url(URL DE VOTRE IMAGE ICI);
}

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

Le code HTML