The web site of sploutch

Image avec affichage en diagonale lors du survole de la souris
Testé et installé by Sploutch - tutoriels.xooit

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.

Listing

Vous trouverez sans doute le tutoriel qu'il vous faut dans la liste complète de plus de 325 tutoriels !

équipe — La team

Accèder aux membres du clan des trois S

Forum — Le forum

Venez trouver de l'aide et partager vos expéiences sur le forum de support

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=Raleway:400,500);
figure.snip1206 {
  font-family: 'Raleway', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  width: 100%;
  color: #000000;
  text-align: center;
  border: 1px solid #3e464c; 
  box-shadow:10px 10px 12px #888;
}
figure.snip1206 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
figure.snip1206 img {
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.snip1206:after {
  background: #ffffff;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  opacity: 0.75;
  -webkit-transform: skew(-45deg) scaleX(0);
  transform: skew(-45deg) scaleX(0);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
figure.snip1206 figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}
figure.snip1206 h2,
figure.snip1206 p {
  margin: 0;
  width: 100%;
  opacity: 0;
}
figure.snip1206 h2 {
  padding: 0 30px;
  display: inline-block;
  font-weight: 400;
  text-transform: uppercase;
}
figure.snip1206 p {
  padding: 0 50px;
  font-size: 0.8em;
  font-weight: 500;
}
figure.snip1206 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.snip1206:hover:after,
figure.snip1206.hover:after {
  -webkit-transform: skew(-45deg) scaleX(1);
  transform: skew(-45deg) scaleX(1);
  transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
figure.snip1206:hover figcaption h2,
figure.snip1206.hover figcaption h2,
figure.snip1206:hover figcaption p,
figure.snip1206.hover figcaption p {
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
figure.snip1206:hover figcaption h2,
figure.snip1206.hover figcaption h2 {
  opacity: 1;
}
figure.snip1206:hover figcaption p,
figure.snip1206.hover figcaption p {
  opacity: 0.7;
}

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

Le code HTML

<figure class="snip1206">
  <img src="http://img.xooimage.com/files113/3/3/c/capture-d-cran-20...17.57.11-578fdcc.png" alt="Listing"/>
  <figcaption>
    <h2>Listing</h2>
    <p>Vous trouverez sans doute le tutoriel qu'il vous faut dans la liste complète de plus de 325 tutoriels !</p>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1206">
  <img src="http://img.xooimage.com/files111/5/1/8/book400x320-578fb35.jpg" alt="équipe"/>
  <figcaption>
    <h2>La team</h2>
    <p>Accèder aux membres du clan des trois <font color="red">S</font></p>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1206">
  <img src="http://img.xooimage.com/files112/1/7/4/capture-d-cran-20...11.01.09-5791098.png" alt="Forum"/>
  <figcaption>
    <h2>Le forum</h2>
    <p>Venez trouver de l'aide et partager vos expéiences sur le forum de support</p>
  </figcaption>
  <a href="#"></a>
</figure>