Bonjour,

Je dois faire cet exercice :

Au départ j'ai une image avec un titre et du texte positionner sur l'image.

Au passage de la souris sur l'image, le titre doit se positionner plus bas et les textes doit disparaître.

Je n'ai aucun problème pour mettre en place la position de départ... Mais ça fait 2 jours que je cherche les solutions pour le :hover, sans succès !!

Est-ce qu'il y aurait une bonne âme pour m'aider svp ?

Mon code HTLM est pour l'instant le suivant :

 - Les div devant chaques éléments sont-ils nécessaire ? Ou mon texte doit-être encadré de <p></p> ?

<div class="conteneur">
        <div class="titre"><h1>Mon titre</h1></div>
        <div class="texte"><span>Mon texte <strong class="money">avec un mot en mise en forme différente</strong><br />fin de mon texte</span></div>
	<div class="image"><img src="monImage.png" alt="image"></div>
</div>

Mon CSS :

.titre,
.texte,
.image {
	position: absolute;
}
.image {
    z-index: -99;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    opacity: 0.5;
}
.titre {
	top: 60%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    font-size: 3em;
    color: white;
}
.texte {
    top: 20%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    font-weight: bold;
    font-size: 3em;
    background-color: white;
    opacity: 0.9;
    border-radius: 0.5em;
    width: 30%;
    padding: 0.2em;
    word-wrap: break-word;
    text-align: center;
}
.money {
	color: orange;
}
.image:hover{
	opacity: 1;
}
/* Ce que doit faire mon titre au survol de la sourie sur l'image :; */
.conteneur img:hover + .titre {
	top: 80%;
	font-size: 2em;
    font-weight: none;
}
/* Ce que doit faire mon texte au survol de la sourie sur l'image */
.box img:hover + span {
	visibility: hidden;
}

Je ne suis pas encore familière des motions de parents, enfants et cie, j'ai essayer moultes possibilités avec ~ > , ou .attaché, mais rien ne fonctionne sur les lignes 39 et 45 !
Est ce que quelqu'un peut m'expliquer comment résoudre ça svp ?
Merci
Delph: )

-
Edité par Af1ne 9 août 2018 à 16:54:05

Salut,

je crois que tu as monté une usine à gaz pour peu de choses

Bon par contre j'ai un peu de mal à comprendre le résultat voulu.

Pour l'instant ton texte est en haut et ton image en bas avec le titre en bas de l'image.
Au survol le texte disparaît et le titre doit se positionner plus bas. Mais plus bas où ? Il est déjà en bas de l'image.

PS :
- la div autour de <h1> est inutile.
- la div autour de l'image est inutile.
- La balise strong n'est pas faite pour faire du gras.
- utiliser absolute partout est une mauvaise idée.

-
Edité par Frogweb 9 août 2018 à 17:19:10

Hello,

En fait au départ :

> TEXTE positionné dans l'image, en haut

> TITRE positionné dans l'image aussi, au milieu

> IMAGE avec opacité

Au passage de la sourie :

> TEXTE disparaît

> TITRE déplacé dans l'image, en bas et plus petit

> IMAGE : sans opacité

Je suis en train de tester une solution où je place l'image en background-image, mais je ne peut pas lui mettre d'opacité en background !?

Quand tu dis dans l'image c'est sur l'image ?

Et si tu veux que le texte soit avant le titre pourquoi le mettre après dans le code html ?

Af1ne a écrit:

Les balises <hx> ne doivent pas venir en début ?

Sémantiquement oui mais dans ton cas tu veux quelque chose qui n'est pas "sémantiquement" visuel

Quelque chose comme ça ? :

http://ancoco.a.n.pic.centerblog.net/wu6a2h8h.jpg

Bonjour Af1ne,

C'est cela que tu veux?

https://codepen.io/Zonecss/pen/MXygOb

Ah ah oui c'était exactement ça @AliasDmc ! Mais en repartant à zéro avec les indications de FrogWeb, j'ai réussi toute seule !

J'ai soumis ma copie, j'attends la validation !!!

Merci pour tout !