Résolu Aide pour cacher un(e)(?) <div> lors d'un survol d'une image

[W.M]

Bonjour,

Je suis actuellement en train de réaliser un site pour ma poire,
Je travaille l'écran d'accueil pour le moment et j'ai besoin d'aide.

Donc, j'aimerais que, dès qu'on survole la logo, la/le (?) <div id=texte> s'enlève, si possible, qu'il baisse en opacité de 100% à 0% en 4s.

Merci de votre aide

W.

 

[1899]

Ca se passe dans le CSS, par exemple :

.texte:hover{
    opacity: .4;
    transition: opacity .4s ease-out;
    -moz-transition: opacity .4s ease-out;
    -webkit-transition: opacity .4s ease-out;
    -o-transition: opacity .4s ease-out;
}

Peux tu essayer ce code ?

 

[W.M]

Ca se passe dans le CSS, par exemple :

.texte:hover{
    opacity: .4;
    transition: opacity .4s ease-out;
    -moz-transition: opacity .4s ease-out;
    -webkit-transition: opacity .4s ease-out;
    -o-transition: opacity .4s ease-out;
}

Peux tu essayer ce code ?

Merci de ton aide,
mais je ne vois pas de changement, faut-il interagir avec un élément ? Et j'aimerais que la <div id="texte"> disparaisse en opacité lorsque qu'on survole la <div id="logo">
Je pensais qu'il fallait du .js, et je ne comprends rien à ça, je débute.

 

[1899]

Merci de ton aide,
mais je ne vois pas de changement, faut-il interagir avec un élément ? Et j'aimerais que la <div id="texte"> disparaisse en opacité lorsque qu'on survole la <div id="logo">
Je pensais qu'il fallait du .js, et je ne comprends rien à ça, je débute.

Ah dans ce cas c'est du JS

@Rivals GTP

 

[Rivals]

.texte:hover{ opacity: .4; transition: opacity .4s ease-out; -moz-transition: opacity .4s ease-out; -webkit-transition: opacity .4s ease-out; -o-transition: opacity .4s ease-out; }

C'est un ID donc #texte

 

[W.M]

C'est un ID donc #texte

C'est à peu près ça, pour le code.
Mais j'aimerais que l'intéraction se passe lorsque qu'on survole le logo, as-tu une idée ?

 

[Rivals]

C'est à peu près ça, pour le code.
Mais j'aimerais que l'intéraction se passe lorsque qu'on survole le logo, as-tu une idée ?

Tu as essayé le code de Hayzen ? Normalement l'état :hover permet d'interagir avec le style de l'élément au survol de celui-ci

 

[1899]

C'est à peu près ça, pour le code.
Mais j'aimerais que l'intéraction se passe lorsque qu'on survole le logo, as-tu une idée ?

Tu rajoutes :hover dans ton code CSS

 

[W.M]

Tu rajoutes :hover dans ton code CSS

Tu as essayé le code de Hayzen ? Normalement l'état :hover permet d'interagir avec le style de l'élément au survol de celui-ci

Pour le moment, dès que je survole le texte, son opacité baisse, mais pas complètement.
Et quand j'interagis avec le logo, il y a juste mes animations que j'avais mises qui fonctionne.
AI-je mal compris quelque chose ?

 

[Rivals]

Pour le moment, dès que je survole le texte, son opacité baisse, mais pas complètement.
Et quand j'interagis avec le logo, il y a juste mes animations que j'avais mises qui fonctionne.
AI-je mal compris quelque chose ?

#texte {
 animation: 4s;
}

#texte:hover {
 display:none;
}

 

[W.M]

#texte {
 animation: 4s;
}

#texte:hover {
 display:none;
}

Il faut forcément que je mette quelque chose en rapport avec la <div id="logo">
Car l'animation, même avec ton code, fonctionne seulement au survol de la <div id="texte">

 

[Rivals]

Il faut forcément que je mette quelque chose en rapport avec la <div id="logo">
Car l'animation, même avec ton code, fonctionne seulement au survol de la <div id="texte">

Quand tu survoles le logo , tu veux que le texte se retire ?

 

[W.M]

Quand tu survoles le logo , tu veux que le texte se retire ?

Oui, car c'est une instruction, donc si la personne est déjà sur le logo et que le texte y est encore, il ne va pas comprendre, et donc dès que la personne retire la souris, j'aimerais que le texte re-"pop"

 

[Rivals]

Oui, car c'est une instruction, donc si la personne est déjà sur le logo et que le texte y est encore, il ne va pas comprendre, et donc dès que la personne retire la souris, j'aimerais que le texte re-"pop"

Ton logo c'est un ID ou une class ?

 

[-PizzaHut-]

Salut,

Pourrait-on avoir un codepen de ce que tu souhaite réaliser ?

 

[W.M]

Salut,

Pourrait-on avoir un codepen de ce que tu souhaite réaliser ?

L'animation du logo est assez bizarre sur codepen, mais le voilà

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

(dans le .html, il y a surement des codes inutiles)

 

[W.M]

Ton logo c'est un ID ou une class ?

Regarde le codepen, j'avais pas vu ta réponse, sry