Kittaby
{ Membre }
Messages : 47
| Hello! Alors, d'après ce petit sujet : clic, j'ai réussi à mettre en place l'idée du volet où en gros, on a une image au dessus d'un texte et celle-ci se déplace pour laisser apparaître le texte. Ce que je voudrais, c'est plus ou moins l'inverse. En gros, j'aimerais bien (et je bidouille depuis des heures, en vain) avoir une image à la base, et lorsque je passe ma souris dessus, un volet en transparence (en gros un fond blanc plus ou moins transparent) se déplace et passe au dessus de l'image (venant de la gauche, par exemple) avec un texte. Donc, l'image de base ne disparaît pas d'un côté mais c'est plutôt un volet qui lui passe au dessus avec un texte (on voit donc toujours l'image en fond). Ah, je ne sais pas si je suis assez claire, mais ouais, s'il y a besoin d'un schéma ou quoi, je peux fournir. J'ai pas vraiment de base, enfin si ce n'est ce qui est dans le tutoriel, donc j'ai pas vraiment d'image à fournir, si ce n'est que j'utilisais cette forme comme test : clic. D'avance, merci beaucoup! |
Dernière édition par Kittaby le Mar 20 Mai 2014, 12:59, édité 1 fois | |
|
Nihil
{ Modérateur }
Messages : 1216
| J'ai fait un exemple rapide, tu cherches à faire quelque chose dans ce genre là ? CSS : - Code:
-
.volet { overflow:hidden; position: relative; width: 300px; height: 200px; background: #eee; background-image: url(http://placekitten.com/300/200); } .volet-contenu { position: absolute; left: -100%; width: 300px; height: 200px; /* les dimensions du bloc */ background: rgba(255,255,255,0.5); -webkit-transition: all 1s linear; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear; }
.volet:hover .volet-contenu { left: 0; } HTML : - Code:
-
<div class="volet"> <div class="volet-contenu">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad eaque numquam accusantium odit facilis quaerat asperiores quisquam repellat perspiciatis quidem ipsum explicabo dolore maxime officia laudantium fugit tempore doloribus tenetur.</div> </div> | | |
|
Kittaby
{ Membre }
Messages : 47
| Oh la vache! Haha, je ne m'attendais pas à avoir une réponse aussi rapide et précise. C'est exactement ce que je voulais! Merci infiniment Nihil, c'est parfait (et mignon l'image, haha). | | |
|