The web site of sploutch

Images découpées avec présentation lors du survole de la souris
Testé et installé by Sploutch - tutoriels.xooit

Il vous suffira de passer votre souris sur les images, pour vous rendre comptes des effets multiples du hover. Bien sur, lors de l'installation, vous devrez changer les urls images, ainsi que le titre et le texte sur chaque images de présentation découpées au hover.

Sploutch — Tutoriels

Venez découvrir plus de 320 tutoriels pour personaliser votre forum xooit

Tutoriels

Venez découvrir plus de 320 tutoriels pour personaliser votre forum xooit

Listing

Venez découvrir le listing des tutoriels. Consultez aussi le Libre service !

L'équipe

Notre équipe est la pour vous
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=Playfair+Display:400,800);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.Sploutch0708 {
  font-family: 'Playfair Display', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  max-height: 220px;
  width: 100%;
  color: #000000;
  text-align: right;
  font-size: 16px;
  background-color: #000000;
  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;
  border-radius: 6px !important;          /***permet de changer l'arrondi***/
  -moz-border-radius: 6px !important;     /***permet de changer l'arrondi***/
  -webkit-border-radius: 6px !important;  /***permet de changer l'arrondi***/
}
.Sploutch0708 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;

}
.Sploutch0708 img {
  max-width: 100%;
  backface-visibility: hidden;

}
.Sploutch0708 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  opacity: 1;
  padding: 30px 0 30px 10px;
  background-color: #767270;
  width: 40%;
  -webkit-transform: translateX(150%);
  transform: translateX(150%);
border: 4px dashed orange !important;
}

.Sploutch0708 figcaption:before {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 100%;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 120px 120px 120px 0;
  border-color: transparent #767270 transparent transparent;

}
.Sploutch0708:after {
  position: absolute;
  bottom: 50%;
  right: 40%;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 120px 120px 0 120px;
  border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;

}
.Sploutch0708 h3,
.Sploutch0708 p {
  line-height: 1.5em;
  -webkit-transform: translateX(-30px);
  transform: translateX(-30px);
  margin: 0;

}
.Sploutch0708 h3 {
  margin: 0 0 5px;
  line-height: 1.1em;
  font-weight: 900;
  font-size: 1.4em;
  opacity: 0.75;
}

.Sploutch0708 p {
  font-size: 0.8em;
}

.Sploutch0708 i {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px 30px;
  font-size: 14px;
  color: #ffffff;
  opacity: 0;
}
.Sploutch0708 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.Sploutch0708:hover img,
.Sploutch0708.hover img {
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  opacity: 0.5;

}
.Sploutch0708:hover:after,
.Sploutch0708.hover:after,
.Sploutch0708:hover figcaption,
.Sploutch0708.hover figcaption,
.Sploutch0708:hover i,
.Sploutch0708.hover i {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;

}

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

Le code HTML

<img src="http://img113.xooimage.com/files/b/4/6/66-578fdc9.jpg" alt="Sploutch" />
  <figcaption>
    <h3><font color="cyan">Tutoriels</font></h3>
    <p>Venez découvrir plus de 320 tutoriels pour personaliser votre forum xooit</p>
  </figcaption><i class="ion-ios-home-outline"><img src="http://img113.xooimage.com/files/3/7/8/gnomes-ff7c227032-15fbd4f-5762244.png"> Tutoriels.xooit</i>
  <a href="https://forumtutorielssupports.xoo.it/index.php"></a>
</figure>

<figure class="Sploutch0708"><img src="http://img113.xooimage.com/files/e/3/c/images-578fdc5.jpg" alt="Sploutch" />
  <figcaption>
    <h3><font color="#C62233">Sploutch</font></h3>
    <p>En savoir plus sur Sploutch</p>
  </figcaption><i class="ion-ios-personadd-outline"><img src="http://img.xooimage.com/files10/0/8/7/goute-12b2ae.gif"><font color="orange">By</font> Sploutch</i>
  <a href="https://forumtutorielssupports.xoo.it/index.php"></a>
</figure>

<figure class="Sploutch0708"><img src="http://img113.xooimage.com/files/3/3/c/capture-d-cran-20...17.57.11-578fdcc.png" alt="Sploutch" />
  <figcaption>
    <h3><font color="#FFFFFF">Listing</font></h3>
    <p>Venez découvrir le listing des tutoriels. Consultez aussi le Libre service !</p>
  </figcaption><i class="ion-ios-location-outline"><img src="http://img.xooimage.com/files114/3/5/d/icons8-case---coc...ifi-e-48-578d256.png"> <font color="cyan">Le listing</font></i>
  <a href="https://forumtutorielssupports.xoo.it/index.php"></a>
</figure>

<figure class="Sploutch0708"><img src="http://img111.xooimage.com/files/f/f/1/unnamed-578fdf4.jpg" alt="Sploutch" />
  <figcaption>
    <h3><font color="blue">L'équipe</font></h3>
    <p>Notre équipe est la pour vous<br /><font color="orange">Service-Gestion</font><br /><font color="#2c3e5a">Superritou</font><br /><font color="#C62233">Sploutch</font></p>
  </figcaption><i class="ion-ios-location-outline"><img src="https://img.xooimage.com/files3/c/1/6/c1634eb79a3cf77d9...ec14e350c-eb02e2.png">Voir l'équipe</i>
  <a href="https://forumtutorielssupports.xoo.it/index.php"></a>
</figure>