AJOUTER UN SLIDE A VOS VIGNETTES

By 26 septembre 2011Tutoriaux

Dans ce tutoriel, vous allez apprendre à créer un effet de slide au survol d’une vignette sans utiliser jquery.

Voici une façon assez simple de créer cet effet en utilisant css3. Il y a bien entendu d’autres moyens d’y arriver  mais ce fut pour moi le plus pratique.

1/ Code HTML :

Il faut organiser votre vignette selon la structure suivante :

[php] <div id="contenu">
<a href="http://tuto.fr">
<span class="fond"></span>

<img> votre image ici <img></a>
</div>
[/php]

2/ la partie CSS3 :

[php]</code>

#contenu { float:left;width:627px; // par exemple}

#contenu a { display: block; float: left; height: 376px ; overflow: hidden; position: relative; width: 627px;} /* les dimensions sont des exemples*/

#contenu a span { position:absolute;}

#contenu a span.fond{
position: absolute;
width:627px; height:376px;  /* les dimensions sont des exemples*/
background: url("votre image png de fond") no-repeat center  rgba(33, 33, 33, 0.4);
transition: transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;

#contenu a:hover span.fond{
position: absolute;
transform: translateY(-376px); /* Valeur négative égale à la hauteur de l’image */
-moz-transform: translateY(-376px);
-o-transform: translateY(-376px);
-webkit-transform: translateY(-376px);}
}

<code>[/php]

Remarque : vous pouvez très bien imagier rajouter une span contenant une description ou une icone

Leave a Reply