The web site of sploutch

Images double cadre 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 des effets. Bien sur, lors de l'installation, vous devrez changer les urls images, ainsi que le titre sur chaque images et aux différents endroits. Les images et titre restent clivable avec une redirection indépendante les unes des autres

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)******/
.Sploutch50 {
  position: relative;
  overflow: hidden;
  margin: 7px;
  padding: 6px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  box-shadow: none !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-box-sizing: padding-box;
  box-sizing: padding-box;
}

.Sploutch50 img {
  max-width: 100%;
  vertical-align: top;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.Sploutch50 .border {
  position: absolute;
  opacity: 0.45;

}

.Sploutch50 .border:before,
.Sploutch50 .border:after,
.Sploutch50 .border div:before,
.Sploutch50 .border div:after {
  background-color: #f5b043;
  position: absolute;
  content: "";
  display: block;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.Sploutch50 .border:before,
.Sploutch50 .border:after {
  width: 0;
  height: 3px;
}

.Sploutch50 .border div:before,
.Sploutch50 .border div:after {
  width: 3px;
  height: 0;
}

.Sploutch50 .border.one {
  left: 0;
  top: 0;
  right: 12px;
  bottom: 12px;
}

.Sploutch50 .border.one:before,
.Sploutch50 .border.one div:before {
  left: 0;
  top: 0;
}

.Sploutch50 .border.one:after,
.Sploutch50 .border.one div:after {
  bottom: 0;
  right: 0;
}

.Sploutch50 .border.two {
  left: 12px;
  top: 12px;
  right: 0;
  bottom: 0;
}

.Sploutch50 .border.two:before,
.Sploutch50 .border.two div:before {
  right: 0;
  top: 0;
}

.Sploutch50 .border.two:after,
.Sploutch50 .border.two div:after {
  bottom: 0;
  left: 0;
}

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

.Sploutch50:hover .border:before,
.Sploutch50.hover .border:before,
.Sploutch50:hover .border:after,
.Sploutch50.hover .border:after {
  width: 100%;
}

.Sploutch50:hover .border div:before,
.Sploutch50.hover .border div:before,
.Sploutch50:hover .border div:after,
.Sploutch50.hover .border div:after {
  height: 100%;
}

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

Le code HTML

<figure class="Sploutch50"><img src="http://img.xooimage.com/files113/3/3/c/capture-d-cran-20...17.57.11-578fdcc.png" alt="tutoriels"/>
  <div class="border one">
    <div></div>
  </div>
  <div class="border two">
    <div></div>
  </div><a href="https://forumtutorielssupports.xoo.it/index.php"><div style="font-family: 'Miss Fajardose', cursive; font-size:25px; text-transform : upperclass; width:400px;line-height:25px; color:  #800a0a; text-shadow:#000000 0px 2px 10px; margin-left:-150px;">Les tutos</div></a>
</figure>

<figure class="Sploutch50"><img src="http://img.xooimage.com/files113/e/3/c/images-578fdc5.jpg" alt="mist"/>
  <div class="border one">
    <div></div>
  </div>
  <div class="border two">
    <div></div>
  </div><a href="https://forumtutorielssupports.xoo.it/index.php"><div style="font-family: 'Miss Fajardose', cursive; font-size:25px; text-transform : upperclass; width:400px;line-height:25px; color:  #1584bf; text-shadow:#000000 0px 2px 10px; margin-left:-150px;">Les étoiles</div></a>
</figure>

<figure class="Sploutch50"><img src="http://img.xooimage.com/files111/5/1/8/book400x320-578fb35.jpg" alt="equipe"/>
  <div class="border one">
    <div></div>
  </div>
  <div class="border two">
    <div></div>
  </div><a href="https://forumtutorielssupports.xoo.it/index.php"><div style="font-family: 'Miss Fajardose', cursive; font-size:25px; text-transform : upperclass; width:400px;line-height:25px; color:  #000000; text-shadow:#000000 0px 2px 10px; margin-left:-150px;">Le guide</div></a>
</figure>