bonjour . voila j'aimerais mettre une image en hover lorsque je met le curseur sur un texte , j'ai donc utiliser cette réponse(1). le résultat est parfait sauf que j'aimerais que le texte disparaisse lorsque l'image apparait . cela est-il possible ?
(1)zingwai a écrit:
Salut,
Pour afficher une image, tu utilises simplement background-image:url('image.png');. Par exemple, tu as un paragraphe en html <p>Mon paragraphe</p>, du côté de ton CSS pour afficher une image au survol : p:hover{background:url('clock.png')no-repeat;}.
tu peux peut être tenter de passer la couleur de texte à transparent, ca pourrait peut être faire l'affaire, normalement je pense que ca n'aurait pas d'incidence sur l'image
ca marche presque mais on voit toujours le texte sur l'image. je n'osais pas vraiment vous donner mes codes car je suis en pleine expérimentation .
c'est le bordel mais voila !! comme ca je peut passer autre chose, regarder au niveau de l'intro . mon image s'affiche en hover mais j'aimerais faire disparaitre le texte.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="cv2020.css"/>
<title>mon cv 2020</title>
</head>
<body>
<div id="bloc_page">
<header>
<div><img src="joancv.jpg" class='flottant' alt="photo de joan" ></div>
<h1>Joan fernandez</h1>
<h2>ne le ........... habite a ..........
<a href="mailto:................com">mon email</a></h2>
</header>
<section>
<aside>
<p id="intro">bonjour j'ai 30ans, je suis pere de famille et je suis en reconversion professionel.
mon but est d'apprendre le métier de dévellopeur web. je suis alaise avec les math , les langues et l'informatique.</p>
</aside>
<article>
<h2>expériences professionel</h2>
<div class="xppro">
<ul>
<li>2019_2020: employer polyvalent hôtellerie restauration : autonomie , gestion des stock ,Utilisation de matériel de nettoyage , up-sales, Vérifier l'identité et les coordonnées de l'interlocuteur,Présenter ou identifier l'objet de l'appel (commande, vente, information, réclamation, assistance, …),</li>
<li>2018_2019:cosi’m :assistant manager:, autonomie , Gestion des stocks et des approvisionnements ,Règles d'hygiène et de sécurité,Système d'information et de communication , Management , coordonné une équipe,Fidélisation client.</li>
<li>2014-2017:Buenos Aires cafe : relation client , connaissance des produits , travaille en équipe , connaissance en mets et vins provenant de (France, Italie, argentine , usa , brésil , Mexique) . Procédures d'encaissement, Typologie du client, Principes de la relation client. </li>
<li>2006_2011 Fredy’s: attirer la clientèle , , présentation et acceuil du client , typologie et relation client , assurer un service a la personne de son entrée a ca sortie, Argumentation commerciale .</li>
</ul>
</div>
</article>
</section>
<footer>
<div id="conteneur">
<div class="element">
<h2>mes langues:</h2>
<div id="liste_langues">
<ul>
<li>francais/anglais:bilingues</li>
<li>Italien : intermediaire</li>
<li>espagnol: intermediaire.</li>
</ul>
</div>
</div>
<div class="element">
<h2>mes formations:</h2>
<div id="liste_formations">
<ol>
<li>niveau BAC STL : 2006 </li>
<li>CAP cafe/brasserie: 2008 </li>
<li>openclassroom: 2020 </li>
</ol>
</div>
</div>
<div class="element">
<h2>mes intéréts:</h2>
<div id="liste_interet">
<ul>
<li>musique: guitare 15ans d'expérience</li>
<li>voyages: langues et cultures</li>
<li>jeux video: pc , xbox, nintendo</li>
<li>fitness:sport et diététique</li>
</ul>
</div>
</div>
<div class="element">
<h2>mes formations:</h2>
<div id="liste_formation">
<ol>
<li>niveau BAC STL: 2006</li>
<li>CAP cafe/brasserie: 2008</li>
<li>openclassroom: 2020</li>
</ol>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
Bonjour, dans l'idéal il faudrait mettre le texte dans un balise différente exemple de solution :
<aside>
<div id="intro">
<p>bonjour j'ai 30ans, je suis pere de famille et je suis en reconversion professionel.Mon but est d'apprendre le métier de dévellopeur web. je suis alaise avec les math, les langues et l'informatique.</p>
</div>
</aside>
#intro:hover p{display:none;}
je te donne juste les parties que j'ai modifier, je te laisse tester...
Pense à indiquer les postes qui ton aider et aussi à mettre le sujet en résolu si tu as la réponse que tu chercher, merci !
Je pense que tu peux utiliser (un peu comme l'a dit flodeux), tu crée une balise (par exemple) :
<div class="my_img"></div>
tu peux ensuite utiliser un peu de CSS comme ceci:
.my_img:hover {
width: 300px;
height: 300px;
background: url(./myimg.png); /* tu peux choisir les paramètres de l'image toi même bien sûr (width, height, size...) */
background-size: 200px;
}
J’espère que ça marche chez toi!
- Edité par JulesGay-Donat 6 juillet 2020 à 19:42:44
bonjour désolé pour le retard , je me suis blesser au sport .
la réponse de noopy étais exactement ce que je chercher .
merci sujet résolu
mettre une image avec hover
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
-> Hébergement GRATUIT <- Parfait pour débuter/dev/test/...