[RÉSOLU] Volet et transparence Bouton_active[RÉSOLU] Volet et transparence Bouton_hover[RÉSOLU] Volet et transparence Fb-hover[RÉSOLU] Volet et transparence Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Fiche de Présentation RPG
[RÉSOLU] Volet et transparence EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
[RÉSOLU] Volet et transparence EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
[RÉSOLU] Volet et transparence EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
[RÉSOLU] Volet et transparence EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
[RÉSOLU] Volet et transparence EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
[RÉSOLU] Volet et transparence EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
[RÉSOLU] Volet et transparence EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
[RÉSOLU] Volet et transparence EmptyMar 07 Fév 2023, 08:40 par Oxtran

-45%
Le deal à ne pas rater :
PC Portable LG Gram 17″ Intel Evo Core i7 32 Go /1 To
1099.99 € 1999.99 €
Voir le deal

Partagez
 

[RÉSOLU] Volet et transparence

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Kittaby
Kittaby
{ Membre }
{ Membre }

Féminin Messages : 47



[RÉSOLU] Volet et transparence Empty
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!  [RÉSOLU] Volet et transparence 3933776953


Dernière édition par Kittaby le Mar 20 Mai 2014, 12:59, édité 1 fois
MessageSujet: [RÉSOLU] Volet et transparence   [RÉSOLU] Volet et transparence EmptyMar 20 Mai 2014, 10:17
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



[RÉSOLU] Volet et transparence Empty
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>
MessageSujet: Re: [RÉSOLU] Volet et transparence   [RÉSOLU] Volet et transparence EmptyMar 20 Mai 2014, 12:56
Revenir en haut Aller en bas
Kittaby
Kittaby
{ Membre }
{ Membre }

Féminin Messages : 47



[RÉSOLU] Volet et transparence Empty
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).  [RÉSOLU] Volet et transparence 2176505670 
MessageSujet: Re: [RÉSOLU] Volet et transparence   [RÉSOLU] Volet et transparence EmptyMar 20 Mai 2014, 12:59
Revenir en haut Aller en bas
Contenu sponsorisé




[RÉSOLU] Volet et transparence Empty
MessageSujet: Re: [RÉSOLU] Volet et transparence   [RÉSOLU] Volet et transparence Empty
Revenir en haut Aller en bas
 

[RÉSOLU] Volet et transparence

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Avatar en volet glissant [Résolu]
» volet sur bloc texte et cellule découpée (résolu)
» Problème d'éléments à déplacé : index_box [RESOLU] - viewtopic_body [RESOLU]
» Soucis de contours + Volet roulant
» RÉSOLU =D !

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit