28112 sujets

CSS et mise en forme, CSS3

Apparition d'un nouvel élément avec Div

Bonjour,
J'ai une image avec du texte dessus et une opacité, je souhaite qu'au survol de cette image l'opacité s'enlève ainsi que le texte et qu'apparaisse un nouveau texte.
Mais je n'y arrive pas... pourriez-vous m'aider ? (j'ai tenté qqch vous le verrez sur mon code mais ... sans grand succès)
voici mon code:
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Gandalf</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>

<body>


<div class="imagevide">
	<div class="carre">
		<p>reward <span>1000</span> <br> golden coins</p>
		<p class="titre">Gandalf</p>
	</div>

		<p class="titre_">Gandalf</p>
	
</div>


</body>
</html>


body
{
	margin: 0px;
	padding: 0px;
	background-image: url("gandalf.png");
	background-repeat: no-repeat;
}

.imagevide{
	width: 500px;
	height: 572px;
	background-color: rgba(255, 255, 255, 0.5);
}


.carre{
	background-color: rgba(255, 255, 255, 0.8);
	width: 90%;
	height: 25%;
	margin: auto;
	position: relative;
	top: 30px;
	border-radius: 15px;
}

p{
	text-align: center;
	font-size: 40px;
	margin: 0px;
	position: relative;
	top: 30px;

}

span{
	color: orange;
}

.titre{
	font-size: 90px;
	color: white;
	position: relative;
	top: 150px;
}

.titre_{
	font-size: 40px;
	color: white;
	position: relative;
	top: 350px;
	display: none;
}

.imagevide:hover{
	display:none;
}
.imagevide:hover .titre_{

	display: block;
}
Modérateur
Salut,

J'ai pas très bien compris ce que tu voulais faire.

Je ne vois pas d'image en "opacité" dans ton code à pas le fond du body.
Je en vois pas non plus d'essai de ta part concernant :
a écrit :
au survol de cette image l'opacité s'enlève


Et pour finir :
.imagevide:hover{
	display:none;
}

Tu ne peut pas faire disparaître l'élément que tu survoles. Enfin si tu peux hein mais ça va clignoter puisque quand tu le fais disparaître tu ne le survol plus donc il réparait etc etc
C'est pas plutôt :
.imagevide:hover .titre {
	display:none;
}
.imagevide:hover .titre_ {
	display: block;
}

que tu voulais mettre ?
a écrit :
s'enlève ainsi que le texte et qu'apparaisse un nouveau texte
Bonjour,

Enfaite j'ai une image.
Sur cette image j'ai appliqué une div class="imagevide" qui elle, est opaque et au dimension exacte de mon image.
- Dans la div class="imagevide j'ai créer une autre div class="carre" avec du texte.

Quand j'applique 
.imagevide:hover{
	opacity: 0;

J'ai donc mon fond qui ne clignote plus ( premier problème de réglé)

Maintenant au survole je retrouve donc mon image simple sans rien. C'est OK !
Maintenant, je souhaite faire apparaitre sur mon image un autre titre mais je n'y arrive pas.

Photo normal:
J'ai une photo avec un fond opaque (.imagevide) et un titre (et .carre)

photo au survol:
le fond opaque ainsi que le titre sont effacés
et je veux qu'un autre titre apparaisse (.titre_)


Merci pour tes conseils Smiley smile
Modérateur
Et bien du coup :

.imagevide:hover .titre {
	display:none;
}
.imagevide:hover .titre_ {
	display: block;
}

comme je t'ai dit au dessus ne marche pas ?
Non ça ne fonctionne pas Smiley decu ...
J'ai tenté autre chose mais qui ne fonctionne pas non plus
body
{
	margin: 0px;
	padding: 0px;
	background-image: url("gandalf.png");
	background-repeat: no-repeat;
}

.imagevide{
	width: 500px;
	height: 572px;
	background-color: rgba(255, 255, 255, 0.5);
}


.carre{
	background-color: rgba(255, 255, 255, 0.8);
	width: 90%;
	height: 25%;
	margin: auto;
	position: relative;
	top: 30px;
	border-radius: 15px;
}

p{
	text-align: center;
	font-size: 40px;
	margin: 0px;
	position: relative;
	top: 30px;

}

span{
	color: orange;
}

.titre{
	font-size: 90px;
	color: white;
	position: relative;
	top: 150px;
}

.titre_{
	font-size: 40px;
	color: white;
	position: relative;
	top: 350px;
	opacity: 0;
}

.imagevide:hover{
	opacity:0;
}

.imagevide:hover .titre_{
	opacity: 1;
}
Modérateur
Je ne sais pas si tu te plante quand tu appliques ce que je dis ou si je me trompe mais ça a l'air de marcher hein : https://jsfiddle.net/vfrmck9L/

Pour ton test avec opacity :
.imagevide:hover{
	opacity:0;
}
.imagevide:hover .titre_{
	opacity: 1;
}

Si tu fais disparaitre .imagevide, comment veut tu voir titre ??? Smiley lol
Je vous remercie, Smiley smile
Mais je pense que je m'étais pas très bien exprimée car je voulais faire ça :
( j'ai volontairement supprimer certaine chose de mon css pour facilité la lecture Smiley smile 




.imagevide{
	width: 500px;
	height: 572px;
	background-color: rgba(255, 255, 255, 0.5);
}


.carre{
	background-color: rgba(255, 255, 255, 0.8);
	width: 90%;
	height: 25%;
	margin: auto;
	position: relative;
	top: 30px;
	border-radius: 15px;
}


.titre{
	font-size: 90px;
	color: white;
	position: relative;
	top: 150px;
}

.titre_{
	font-size: 40px;
	color: white;
	position: relative;
	top: 450px;
	opacity: 0;
}

.imagevide:hover{
	background-color: transparent;
}

.imagevide:hover .carre{
	display: none;
}

.imagevide:hover .titre_{
	opacity: 1;
}
Sujet clos
Aller à