Bonjour,

Je souhaite transformer le rectangle rouge de chaque bannières en boutons dépliants sur le site https://www.vapeprivate.com/. Sur mobile on cliquerais sur le bouton alors que sur pc pas de bouton le rectangle rouge avec le texte s'afficherais au survol

Ici c'est une photo de l'existant 

Ici c'est des photos de ce que je veux faire en CSS

-
Edité par VictorBonomie-amort 28 décembre 2021 à 23:45:30

Bonsoir ! Soit plus explicite on comprend pas bien ce que tu veux faire exactement. Ce que tu veux c'est avoir un bouton sur l'image et lorsqu'on passe la souris dessus tu affiches le texte ou quoi ?

oui un bouton sur mobile on clique et sur pc pas de bouton le rectangle rouge s'affiche au survol de la souris

-
Edité par VictorBonomie-amort 28 décembre 2021 à 23:44:53

Quelqu'un pour m'aider svp ?

Bonjour,

il s'agit de cibler le frère d'un élément survolé,
en l'occurrence de mettre en display:block un élément qui est en display:none

Voir ici notamment "cibler un frère d'un élément survolé

https://www.alsacreations.com/astuce/lire/1312-selectionner-les-freres-d-un-element-en-css-nth-child.html#exemple4

donc le texteen légende doit être frère de l'image, et la déclaration quelque chose comme :

.limage:hover ~ .legende {
    display:block;
}

pour avoir un effet de transition, on peut plutôt mettre le fond rouge au survol, et passer le texte de transparent à blanc. La transition s'indiquera sur la légende

regarde ce que j'ai mis ça ne fait que masquer l'élément mais il ne réapparait pas au survol :/

-
Edité par VictorBonomie-amort 3 janvier 2022 à 23:35:47

C'est difficile de t'aider sans voir le code HTML de ton élément en question. Mais je crois qu'il y a une erreur au niveau de ta deuxième règle essaie plutôt

.banner-type-10 .banner--link-overlay:hover{
      
        display:block !important;
}

Ah c'est bon on à réussi ! Merci Foussedev

.banner-type-10 .banner--link-overlay .hidden{
	display:none !important;
}

.banner-type-10 .banner--link-overlay:hover .hidden{
       
        display:block !important;
}

-
Edité par VictorBonomie-amort 4 janvier 2022 à 12:48:36

Quelqu'un pour m'aider pour faire le bouton sur mobile ?