bloc de div image qui affiche une div au survol

Par sty, il y a 7 ans

Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.

Affiche div au survol d une div image

Décrivez ici votre code ou ce que vous cherchez à faire

<div class="inner"> <h2>AVANTAGES</h2> <div class="col-md-12 marginPara"> <div class="ImgAvantages1"><img src="images/avantage1.png"> <div class="col-md-12 marginPara avantage1"> <p>L’efficacité lumineuse est de 140 Lm/W, soit 30% plus efficace qu’un Led de dernière génération. Sa lumière est la plus uniforme du marché. Sa perte d’efficacité est de 1% tous les 5 ans.</p> </div> </div> <div class="ImgAvantages2"><img src="images/avantage2.png"> <div class="col-md-12 marginPara avantage2"> <p>Economie d’énergie avec 80% de moins d’énergie que les lumières traditionnelles. 30% de moins que la génération de Led. Plus de lumière et consommation réduite.</p> </div> </div> <div class="ImgAvantages3"><img src="images/avantage3.png"> <div class="col-md-12 marginPara avantage3"> <p>Le système d’éclairage avec la plus longue durée de vie. Minimum de 100.000 heures, Soit plus de 10 années avec 24h/24 365 jours par an. Aucun entretien.</p> </div> </div> <div class="ImgAvantages4"><img src="images/avantage4.png"> <div class="col-md-12 marginPara avantage4"> <p>Résistant aux températures comprises entre -40°C et +70°C Résistant aux chocs Résistant aux vibrations Résistant à l’eau</p> </div> </div> <div class="ImgAvantages5"><img src="images/avantage5.png"> <div class="col-md-12 marginPara avantage5"> <p>Angle d’éclairage de plus de 180°. Plage de fonctionnement entre 60 et 300 volts. Températures de couleurs comprises entre 2 250 et 6 000 k Dimérisation 100% </p> </div> </div> </div> </div> Le css .ImgAvantages1,.ImgAvantages2,.ImgAvantages3,.ImgAvantages4,.ImgAvantages5{ float: left; margin-right: 48px; margin-left: 10px; } .avantage1,.avantage2,.avantage3,.avantage4,.avantage5{ background-color: #FFF; padding: 20px 50px !important; border: 3px solid black; display: none; } .ImgAvantages1:hover .avantage1{ display: block; } .ImgAvantages2:hover .avantage2{ display: block; } .ImgAvantages3:hover .avantage3{ display: block; } .ImgAvantages4:hover .avantage4{ display: block; } .ImgAvantages5:hover .avantage5{ display: block; }

Ce que je veux

j ai 5 images qui doivent afficher une div au survol avec un display:none pour les autres.
Sinon je pense que je prefererais une animation qui montre la première div image puis passe a la suivante et faire une boucle.
Mais déja le système de div multiple galère pour se placer.

Ce que j'obtiens

erreur1
erreur2
erreur3

7 réponses

sty, il y a 7 ans

oui je vais look, j ai vu en faite mon problème
exxemple sur ton exemple ,

<div class="ImgAvantages col-md-6"> au lieu de <div class="ImgAvantages col-md-3">

donc changement de la taille de la div fais en sorte de decaler tout et c'est cela que j'essaie de regler.
Du moins ainsi , tu vois le problème en visuel sur la déformation en direct sur ton exemple.
Mais je vais allez look, sur le tuto voir si je trouve se qui pourrait m'aider a ne plus faire bouger les divs.

Lartak, il y a 7 ans

Bonsoir.
Pourquoi nommes tu différentes classes, alors qu'elles ont les mêmes propriétées ?
Tu pourrais facilement modifier ton code CSS par :

.ImgAvantages { float: left; margin-right: 48px; margin-left: 10px; } .avantage { background-color: #FFF; padding: 20px 50px !important; border: 3px solid black; display: none; } .ImgAvantages:hover > .avantage { display: block; }

Petit exemple : ici.

sty, il y a 7 ans

Salut Lartak, j ai look oui plus simple.
La fatigue et la chaleur agit plus que se que je pense, au final j'ai repris le système connu d'affiche une div par rapport a une div et me suis dis,vas savoir pourquoi, de le reproduire pour chaque paragraphe. Mais ce que j'ai vu un exemple est impec merci a toi.
Sinon pour laisse le premier paragraphe je le laisse en active et j'affiche le bloc du premier paragraphe, je présume du moins je vais tester cela.
Et pour avoir une animation sur les divs qu'elle change toute seul je peux juste le faire en css avec de l'animation ou je dois passer par du jquery obligatoirement??

Laznet, il y a 7 ans

" Et pour avoir une animation sur les divs qu'elle change toute seul je peux juste le faire en css avec de l'animation ou je dois passer par du jquery obligatoirement?? " — Je dirais que ça dépend, mais j'aurais plus tendance à te dire d'utiliser le javascript pour exécuter une animation tous les X temps avec la fonction SetInterval

sty, il y a 7 ans

Un grand merci, mais je viens de tester la et je me retrouve avec la meme erreur de deplacement comme sur les images en faites les divs; de paragraphes doivent se surperposer au changement du hover de l image.
et decale les div images pour placer le texte et moi je désire que mes images restent en ligne.

Laznet, il y a 7 ans

Dans ce tuto grafikart aborde tout ce que tu veux faire. Je te laisse y jeter un coup d'oeil.

sty, il y a 7 ans

Bon j'ai changer mon code car au niveau de mon site cela ne passait pas au niveau visuel comme je le désirais donc un grand merci et je clos se sujet