Apparition animé d'un titre lors du survol d'une div

Résolu
Eritou Messages postés 110 Date d'inscription   Statut Membre Dernière intervention   -  
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   -
Bonsoir,
J'ai un logo qui lors du :hover s'agrandit et perd de son opacité. J'ai trouvé sur ce site comment afficher une div "masquée" lors de ce :hover. Malheureusement, je n'arrive pas à faire une animation sur ce titre. Le but recherché est le logo qui perd de son opacité lors du :hover (c'est OK) et le titre qui lui gagne en opacité (logo :hover = titre opacité o pour arriver à une opacité 1).
Je vous joint le html complet avec ses CSS : 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style>
#Test{position:relative;}

#logo{	
	width: 200px;
	padding: 0;
		height: auto;
	top: 0px;
	right: 0px;
	bottom: auto;
	left: auto;
	margin-bottom: auto;
	margin-left: auto;
		  }
.logo{	
	width: 200px;
	position: relative;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;

		  }
.logo:hover{
	width: 200px;
	filter: alpha(opacity=50);
	opacity: 0.15;
	-webkit-transform: scale(2.5);
	-moz-transform: scale(2.5);
	-ms-transform: scale(2.5);
	-o-transform: scale(2.5);
	transform: scale(2.5);
	top: 0px;
	right: 0px;
	position: relative;
	margin-bottom: auto;
	margin-left: auto;
    }
	
.animClass {
	backface-visibility: hidden;
	margin-right: 0px;
	right: 0px;
	position: relative;
	top: 0px;
	left: auto;
	bottom: auto;
	float: right;
	margin-top: 0px;
}

#SOUSmajeur1{
	position: absolute;
	width: 300px;
	height : 300px;
	top : 10px;
	left : 120px;
	z-index: 20;
	text-align: center;
	font-size: 250px;

}
.niveau2{
	display: none;
	color: #000000;
	-webkit-transition: width 1s linear, background-color 1s linear;
	-moz-transition: width 1s linear, background-color 1s linear;
	-o-transition: width 1s linear, background-color 1s linear;
	transition: width 1s linear, background-color 1s linear;}

.niveau1:hover .niveau2 {
	display: block; 
	color: #993399;


}

</style>

</head>

<body>
<div id="Test">
   <div id="logo" class="niveau1"><a href="#section-un"><img src="img/logo.svg"  alt="" width="50px" class="logo animClass"/></a>
        <div id="SOUSmajeur1" class="niveau2"><div><span>blabla</span></div>

    </div><!-- #Test -->
    
    <div id="pagePrems">
    <div id="Majeur1" class="niveau1" "logo"><span><br /><br /><br />
    </span></div>

</div>
</body>
</html>

Je me doute que ce n'ai pas un gros soucis, mais je n'ai pas trouvé la solution.
Merci pour votre aide et bonne fin de week-end,
E.

5 réponses

Réponse 1 / 5
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
salut
pourrais tu donner précisement les element html
1) celui sur lequel se fait le hover
2) celui qui gagne en opacité
1
Réponse 2 / 5
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Pour le jsfiddle non c'était pas moi
voici le jsfiddle avec apparition opacité
http://jsfiddle.net/h96Bw/258/

toujours avec @keyframes (ce coup la je n'ai pas oublié le s :-)
1
Réponse 3 / 5
Eritou Messages postés 110 Date d'inscription   Statut Membre Dernière intervention   4
 
Alléluia !
Je savais que la .logo était dans le coup (doublon de :hover) mais bien incapable de trouver la solution !!! Deux questions, deux (simples ?) animations et une page d'accueil très attrayante grâce à toi.
Bien que le prob soit résolu en peu de temps (merci pour ta rapidité), je suppose que si je remplace le texte "bolobolo" par une image ayant pour classe .niveau2, l'effet sera identique !?!
Autre question : comment as-tu trouvé si vite un jsfiddle répondant (en parti) à ma question ?
Encore MERCi et un grand BRAVO !!!
Bonne fin de week-end animostab,
E.
1
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Pour 1) mets plutot l'image dans la div .niveau2 à la place de "bo lb bo lbbo"
pour2) j'ai juste modifié et enregistré le jsfiddle initial dont tu m'as donné le lien
voila bon début de semaine
0
Réponse 4 / 5
Eritou Messages postés 110 Date d'inscription   Statut Membre Dernière intervention   4
 
Slt animostab,
je suis parti de ce code :
http://jsfiddle.net/h96Bw/ (n'était-ce pas de toi ?)
Dans mon cas, Majeur1=logo (effets OK)
SOUSmajeur1 est le texte qui s'affiche lors du :hover sur le logo.
Malheureusement je n'arrive pas à lui attribuer une transition d'une seconde, le but étant simplement de partir d'une opacité 0 à une opacité 1.
As-tu une idée ?
Merci et bonne fin de week-end,
E.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
Eritou Messages postés 110 Date d'inscription   Statut Membre Dernière intervention   4
 
Merci pour ton aide animostab,
Majeur1=logo
SOUSmajeur1=titre
Dans mon cas, le titre n'apparraît pas lors du :hover sur logo :(
Je pense pourtant avoir respecté le jsfiddle.
Voici les CSS 
#logo{
	padding: 0;
	height: auto;
	right: 0px;
	bottom: auto;
	left: auto;
	margin-bottom: auto;
	margin-left: auto;
	top: 0px;
	position: absolute;
		  }
		  
		  @keyframes logoAp {
0% {opacity:0;}
99% {opacity:0;}
100% {opacity:1;}
}

.logo {
	width: 200px;
	-webkit-animation: logoAp 3s 1;
	-moz-animation: logoAp 3s 1;
	-ms-animation: logoAp 3s 1;
	-o-animation: logoAp 3s 1;
	animation: logoAp 3s 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;

		  }
.logo:hover{
	filter: alpha(opacity=50);
	opacity: 0.15;
	-webkit-transform: scale(2.5);
	-moz-transform: scale(2.5);
	-ms-transform: scale(2.5);
	-o-transform: scale(2.5);
	transform: scale(2.5);
    }
		
.animClass {
	backface-visibility: hidden;
	margin-right: 0px;
	right: 0px;
	position: relative;
	top: 0px;
	left: auto;
	bottom: auto;
	float: right;
	margin-top: 0px;
}

#titre{
	padding: 0;
	height: auto;
	bottom: auto;
	left: 0px;
	margin-bottom: auto;
	margin-left: 0px;
	top: 0px;
	position: absolute;
	width: 800px;
	margin-top: 200px;
	font: 100px Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
		  }
@keyframes opacit {
    0% {opacity:0;}
    100 {opacity:1;}
}

.niveau2{
	display: none;
}

.niveau1:hover .niveau2 {
	display: block; 
    animation: opacit 2s 1;
}

.niveau1:hover  {
}

et le HTML : 
<div id="logo" class="niveau1" "logo"><a href="#section-un"><img src="img/logo.svg" alt="" class="logo" "animClass"/></a>
    </div>
        <div id="titre" class="niveau2">bo lb bo lbbo</div>

Quelque chose m'échappe :(
Encore merci pour tes réponses,
E.
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
le div titre doit être dans le div logo
ou sinon 
.niveau1:hover + .niveau2 {
	display: block; 
    animation: opacit 2s 1;
}

ou

.niveau1:hover ~ .niveau2 {
	display: block; 
    animation: opacit 2s 1;
}
0

Discussions similaires

téléchargé des films de dessins animés
djaz.123 -
41611209 -

6 réponses
Que faut il écrire dans le champ obligatoire : Adresse (suite)*?
Matisu -
-L0Lock- -

7 réponses
a qu'el tome s'arette l'animé de nana
mira13015 -
nina -

7 réponses
Site Streaming animé (manga) voix anglais sous titre francais
SoulWinner270 -
48-mlk -

5 réponses
Ça veut dire quoi intitulé d’une adresse ??
Mousse -
did -

4 réponses