Sujet Précédent Sujet Suivant

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

Résolu/Fermé
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 - 14 juin 2015 à 00:44
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 15 juin 2015 à 00:08
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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
14 juin 2015 à 12:22
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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
14 juin 2015 à 16:57
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 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
14 juin 2015 à 20:28
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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 15/06/2015 à 00:10
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 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
14 juin 2015 à 16:41
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 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
14 juin 2015 à 17:54
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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
14 juin 2015 à 19:50
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

document html
Utilisateur anonyme -
brucine -

1 réponse
"Nom de l'adresse" lors d'une inscription sur une site
ScarexStupid -
Rossignol -

9 réponses
Téléchargements gratuits de film et dessin a.
alex69_26 -
MAXIMEKAMAGA -

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

5 réponses
titre encadré
calimero -
Raymond PENTIER -

5 réponses