The web site of sploutch

Image de présentation avec animation lors du survole de la souris
Testé et installé by Sploutch - tutoriels.xooit

Voici ci-dessous un exemple en situation d'un bel effet de transition. Il vous suffira de passer votre souris sur un portrait, pour vous rendre comptes des effets. Bien sur, lors de l'installation, vous devrez changer les urls images, ainsi que le titre et le texte sur chaque portrait.

Ville — Détente ...

S'assoire et regarder ...

Emplacement libre ! — Un bon livre ...

Le livre officiel de nos ressources ...

Voiture — Calme et ...

Le calme d'une mer tranquille... Avant la tempête peut-être !

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);
@import url(https://fonts.googleapis.com/css?family=Fauna+One);
.sploutch {
  font-family: 'Fauna One', Arial, sans-serif;
  position: relative;
  margin: 10px 20px;
  min-width: 230px;
  max-width: 295px;
  min-height: 220px;
  width: 100%;
  color: #e08402 !important;
  text-align: right;
  line-height: 1.4em;
  background-color: #f2f2f2;
  font-size: 16px;
    border-radius: 6px !important;          
  -moz-border-radius: 6px !important;     
  -webkit-border-radius: 6px !important;

}

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

.sploutch img {
  position: absolute;
  right: 0%;
  top: 50%;
  opacity: 1;
  width: 100%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);

}
.sploutch figcaption {
  position: absolute;
  width: 50%;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  padding: 20px 0 20px 20px;

}
.sploutch h2,
.sploutch p {
  margin: 0;
  width: 100%;
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
  opacity: 0;
}

.sploutch h2 {
  font-family: 'Playfair Display', Arial, sans-serif;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.sploutch p {
  font-size: 0.8em;
}
.sploutch a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.sploutch:hover img,
.sploutch.hover img {
  width: 55%;
  right: -10%;
  border: 2px solid orange;
  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;
}
.sploutch:hover figcaption h2,
.sploutch.hover figcaption h2,
.sploutch:hover figcaption p,
.sploutch.hover figcaption p {
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  opacity: 1;
}

.ContourIm {
  border-radius: 6px !important;          
  -moz-border-radius: 6px !important;     
  -webkit-border-radius: 6px !important;  
}

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

Le code HTML

<figure class="sploutch">
  <figcaption>
    <h2>Détente ...</h2>
    <p>S'assoire et regarder ... </p>
  </figcaption>
  <a href="https://forumtutorielssupports.xoo.it/index.php"></a><img src="http://img115.xooimage.com/files/3/7/5/couch-soleil320x400-578fb1a.jpg" class="ContourIm" alt="Ville" />
</figure>

<figure class="sploutch">
  <figcaption>
    <h2>Un bon livre ...</h2>
    <p>Le livre officiel de nos ressources ...</p>
  </figcaption>
  <a href="https://forumtutorielssupports.xoo.it/index.php"></a><img src="http://img111.xooimage.com/files/5/1/8/book400x320-578fb35.jpg" class="ContourIm" alt="Emplacement libre !" />
</figure>

<figure class="sploutch">
  <figcaption>
    <h2>Calme et ...</h2>
    <p>Le calme d'une mer tranquille... Avant la tempête peut-être !</p>
  </figcaption>
  <a href="https://forumtutorielssupports.xoo.it/index.php"></a><img src="http://img115.xooimage.com/files/1/3/3/mer400x320-578fb1c.jpg" class="ContourIm" alt="Voiture" />
</figure>