The web site of sploutch

Image masquées avec un bel effet lors du survole
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. Très bel effet d'apparition de l'image !

Les héros de mes 10 ans !

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=Sigmar+One);

.Marvel {
  width: 200px;
  height: 200px;
  /* center content using flex box */
  display: flex;
  justify-content: center;
  align-items: center;
  /* overlay */
  box-shadow: 0 0 0 100px inset, 0 0 5px grey;
  /* hover out transition */
  transition: box-shadow 1s;
  float: left;
  margin: 10px;
}

/* Marvel names */

.Marvel::after {
  width: 80%;
  height: 80%;
  display: block;
  white-space: pre;
  font: 15pt 'sigmar one';
  color: orange;
  border: 2px solid;
  text-align: center;
  /* center content using flex box */
  display: flex;
  justify-content: center;
  align-items: center;
  /* hover out transition */
  transition: opacity 1s .5s;
   box-shadow: 0px 0px 25px #FFFFFF;
   -moz-box-shadow: 0px 0px 25px #FFFFFF;
   -webkit-box-shadow: 0px 0px 25px #FFFFFF;
   -o-box-shadow: 0px 0px 25px #FFFFFF;
   -htm-box-shadow: 0px 0px 25px #FFFFFF;

}

/* reveal Marvel picture on hover */

.Marvel:hover {
  box-shadow: 0 0 0 5px inset, 0 0 5px grey, 0 0 10px grey inset;
  transition: box-shadow 1s;
}

/* hide Marvel name on hover */

.Marvel:hover::after {
  opacity: 0;
  transition: opacity .5s;
}

#Goldorak {
  background-image: url(http://img111.xooimage.com/files/7/6/9/goldorak200x214-578ef2d.jpg);
  color: rgba(7, 66, 216, 0.80);
}

#Goldorak::after {
  content: 'Goldorak';
}

#Albator {
  background-image: url(http://img114.xooimage.com/files/c/9/f/albator200x214-578ef28.jpg);
  color: rgba(221, 86, 63, .9);
}

#Albator::after {
  content: 'Albator'
}

#Zorro {
  background-image: url(http://img113.xooimage.com/files/b/5/6/zorro200x214-578ef2a.jpg);
  color: rgba(65, 102, 114, .9);
}

#Zorro::after {
  content: 'Zorro'
}

#Spiderman {
  background-image: url(http://img115.xooimage.com/files/a/3/e/spiderman200x214-578ef2f.jpg);
  color: rgba(179, 152, 98, .9);
}

#Spiderman::after {
  content: 'Spiderman'
}

#Libre {
  background-image: url(http://);
  color: rgba(85, 118, 69, 0.81);
}

#Libre::after {
  content: 'Libre'
}

#Sploucth {
  background-image: url(http://img114.xooimage.com/files/5/f/9/sploutcha200x214-578f073.png);
  color: rgba(92, 69, 118, 0.80);
}

#Sploucth::after {
  content: 'Sploutch'
}

#Sploutch {
  width: 660px;
  height: 500px;
  margin:  auto;
   box-shadow: 0px 0px 25px #000000;
   -moz-box-shadow: 0px 0px 25px #000000;
   -webkit-box-shadow: 0px 0px 25px #000000;
   -o-box-shadow: 0px 0px 25px #000000;
   -htm-box-shadow: 0px 0px 25px #000000;
}

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

Le code HTML