The web site of sploutch

Images voilées lors du survole de la souris
Testé et installé by Sploutch - tutoriels.xooit

Il vous suffira de passer votre souris sur une image pour vous rendre comptes de l'effet voilé. Bien sur, lors de l'installation, vous devrez changer les urls images, ainsi que le titre et le texte.

Les tutoriels

Nous réalisons régulièrement des tutoriels que nous rendons disponible pour vos forums **xooit**

Les tutoriels

Nous réalisons régulièrement des tutoriels que nous rendons disponible pour vos forums **xooit**

Le forum

Vous n'êtes pas seul. Nous sommes la, sur le forum pour vous venir en aide.

L'équipe des 3 S

Service-Gestion
Superritou
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)******/
@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Quattrocento);
.Sploutch {
  font-family: 'Quattrocento', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #141414;
  text-align: left;
  line-height: 1.4em;
  font-size: 16px;
border: 3px solid #f0941d;
  -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;
  border-radius: 70px;
  background-color: #c4c2be !important;
  -moz-border-radius:0px 70px 0px 70px; /* pour mozilla */
  -webkit-border-radius: 0px 70px 0px 70px; /* pour chrome et safari */
}

.Sploutch * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

.Sploutch img {
  max-width: 100%;
  vertical-align: top;
}

.Sploutch figcaption {
  position: absolute;
  top: calc(77%);
  width: 100%;
  background-color: #ffffff;
  padding: 15px 25px 65px;
}

.Sploutch figcaption:before {
  position: absolute;
  content: '';
  z-index: 2;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 80px;
  background-image: -webkit-linear-gradient(top, transparent 0%, #ffffff 100%);
  background-image: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
}

.Sploutch h3,
.Sploutch p {
  margin: 0 0 10px;
}
.Sploutch h3 {
  font-weight: 300;
  font-size: 1.4em;
  line-height: 1.2em;
  font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase;
}

.Sploutch p {
  font-size: 0.9em;
  letter-spacing: 1px;
  opacity: 0.9;
}

.Sploutch a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.Sploutch:hover figcaption,
.Sploutch.hover figcaption {
  top: 80px;
}

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

Le code HTML

<figure class="Sploutch">
 <img src="http://img.xooimage.com/files113/3/3/c/capture-d-cran-20...17.57.11-578fdcc.png" alt="Les tutoriels" />
 <figcaption>
 <h3>Les tutoriels</h3>
 Nous réalisons régulièrement des tutoriels que nous rendons disponible pour vos forums xooit <img src="http://img.xooimage.com/files113/3/7/8/gnomes-ff7c227032-15fbd4f-5762244.png">
 </figcaption>
 <a href="https://forumtutorielssupports.xoo.it/index.php"></a>
</figure>
 
<figure class="Sploutch"><img src="http://img112.xooimage.com/files/1/7/4/capture-d-cran-20...11.01.09-5791098.png" alt="Le forum" />
 <figcaption>
 <h3>Le forum</h3>
 Vous n'êtes pas seul. Nous sommes la, sur le forum pour vous venir en aide.
 </figcaption>
 <a href="https://forumtutorielssupports.xoo.it/index.php"></a>
</figure>
 
<figure class="Sploutch"><img src="http://img.xooimage.com/files111/5/1/8/book400x320-578fb35.jpg" alt="L'équipe" />
 <figcaption>
 <h3> L'équipe des 3 S</h3>
 Service-Gestion Superritou Sploutch
 </figcaption>
 <a href="https://forumtutorielssupports.xoo.it/index.php"></a>
</figure>