Haut de page

Bas de page

Image flash noir et blanc et son titre avec lien de redirection.
Testé et installé by Sploutch - tutoriels.xooit

Voici ci-dessous lors du survole de votre souris, un exemple du résultat. Affichage d'une image en noir et blanc, avec au passage de la souris un flash en diagonale qui la traverse. Le titre au même moment monte légèrement. Sous le texte, actuellement dans l'exemple "By Sploutch" vous avez un lien de redirection. La zone de texte est modifiable ainsi que la couleur de ce texte.

By Sploutch

indulge yourself with 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)******/
a{
  color: #111
}

.photo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

.photo img{
  width: 200px;
  height: 280px;
  object-fit: cover;
  filter: grayscale(100%) contrast(120%);
  box-shadow: 10px 15px 25px 0 rgba(0,0,0,.2);
  display: block;
  transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
  margin-top: -10px;

}

.photo:hover img{
  box-shadow: 1px 1px 10px 0 rgba(0,0,0,.1);

}

.photo .glow-wrap{
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  margin-top: -10px;

}

.photo .glow{
  display: block;
  position:absolute;
  width: 40%;
  height: 200%;
  background: rgba(255,255,255,.2);
  top: 0;
  filter: blur(5px);
  transform: rotate(45deg) translate(-450%, 0);
  transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);

}

.photo:hover .glow{
  transform: rotate(45deg) translate(450%, 0);
  transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.photo:hover img,
.photo:hover .glow-wrap{
  margin-top: 0;
}

h1{
  position: absolute;
  z-index: 1;
  transform: translate(-25%, -65%);
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  line-height: 1.2;
}

/* Ends */

#author{
  font-family: Helvetica, Arial;
  text-transform: uppercase;
  font-size: 14px;
  text-decoration: none;
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  color: #888;
}

#author:hover{
  color: #111;
}

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

Le code HTML