-
Image au survol texte-CSS
-
Commentaires
12StessyMercredi 22 Avril 2015 à 13:10Salut tout le mondeSalut!
il faut mettre les 2 codes : html + CSS
Laisser un lien (url) ou on peut voir et analyser le code installé...!me revoici ici, en fait je n'arrive pas en prenant par ex le code htlm, je precise que je suis sous wordpress, et donc ya rien qui se passe, chez moi,
Est que les codes sont que pour Eklablog ?
Mercu
Oui je connais depuis longtemps cette propriété CSS (rotate) que tu peux voir sur mon menu header, ainsi que sur les avatars derniers visiteurs.
Pour être sur que ces propriétés CSS (animation, transition, delay, transform etc...) soient supportées par tous les navigateurs, il faut les préfixer.
Exemple pour chrome on ajoute devant la propriété, le préfixe "-webkit-".
Pour facilité la tâche il existe des sites qui préfixent ton code CSS: http://prefixmycss.com/ (par exemple).
Tu colles ton code css sans préfixe, et il met tous les préfixes voulus et indispensables.
Pour tester des codes ou tes blogs sous différents navigateurs, il est indispensable d'avoir sur son ordi les principaux:
Google chrome, Firefox, Internet-Explorateur, safari ....
Je te conseille vraiment d'héberger tes images sur eklablog pour obtenir des url plus courtes (les tiennes sont trop longues), et pour ne pas être à la merci
d'une panne de l'hébergeur externe, ou d'une maintenance interminable....Autre sujet , voilà je voulais obliqué kelkes images , alors jai cherché et jai trouvé ceci " transform: rotate(5deg)"
jai incorporé dans code de mon image et mis aussi ombre, ça marche CAR JE VOIS EFFET sur firefox et IE11 MAIS JE SAIS PAS SI ON VOIT SUR CHROME
dIS MOI CE KE TU PENSES DU CODE, si tu connais cette balise ke jai ajouté, mais je crois ke oui !!!! mdr
<p> </p>
<p><img style="box-shadow: 6px 6px 10px black; transform: rotate(5deg);" src="https://ybzv0g.dm2302.livefilestore.com/y2pv7Kr2fb1OzQkzyJDS_DElMvDb9eNb-sc9RYeLCmnKYIhQcjZmvw_aOb0BWLfKa5hvH-e519nUguFghH_pZRMQIFUBq0KDCHINmiSjgf_ob0/essai%20photoshop.jpg?psid=1" alt="" width="507" height="507" /></p>
<p> </p>
ouaip...les br c'est pour donner de la place à l'image, mais tu peux les supprimer en modifiant le code (balise img):
<img class="imag" style="position: absolute;" src="http://ekladata.com/IeNXDDdwcBdf3sH7FfdYOFmty5s.png" border="0" alt="Mike" width="300">par modifié en (position:fixed;):
<img class="imag" style="position: fixed;" src="http://ekladata.com/IeNXDDdwcBdf3sH7FfdYOFmty5s.png" border="0" alt="Mike" width="300">ha zut jaurais dû le voir cet espace du a !!!
ok c'est bon ça marche , mais dis donc jen ai des br br lol
merci !!!!
Ah...oui !!!! il y a un espace de trop avant le "a" de la balise <a href....>
Donc le code exact est:<a class="imag" href="#"> Passez le curseur ici <span style="color: red;">
<img class="imag" style="position: absolute;" src="URL-de-l-image" border="0" alt="Mike" width="300" /> </span></a><br /><br />Ton url image est beaucoup trop longue....passe par Eklablog pour héberger tes images.
Exemple, l'url image devient chez Eklablog: http://ekladata.com/IeNXDDdwcBdf3sH7FfdYOFmty5s.png
et le code final pour toi:<p><a class="imag" href="#"> Passez le curseur ici <span style="color: red;">
<img class="imag" style="position: absolute;" src="http://ekladata.com/IeNXDDdwcBdf3sH7FfdYOFmty5s.png" border="0" alt="Mike" width="300">
</span></a><br><br><br><br><br><br><br><br><br><br><br></p>
pas moyen, chez moi ça marche pas
le code se transforme kan je fais ok
<p>< a class="imag" href="#"> Passez le curseur ici <span style="color: red;"> <img class="imag" style="position: absolute;" src="https://yhazsq.dm2301.livefilestore.com/y2prxQTINRjCYshMOE2guh7ASni3xhG7_1FW_lN7ZCp5SseNnxXDi0GFxniQOsv4Jj04YP9kXufSAGNt9JpiutgN9rN5rv7g_oCd0yVC5B5X5Y/265x246.png?psid=1" border="0" alt="Mike" width="300" /> </span><br><br></p>
voila lien ou jai fait essai lol , le css est mis
http://la-gentille-rebelle3.eklablog.com/-a106238518
bonne soirée , je pars manger chinois lol
Ah..! c'est l'éditeur qui ajoute le lien de l'article quand on met #
le code est:< a class="imag" href="#">
bONJOUR !!!
A koi correspond cette adresse en 1e ligne du html
/image-au-survol-texte-css-a50246722#
merci
Ajouter un commentaire
quelqu'un pourrait m'aider s'il vous plaît ?
ce que j'obtiens en éditant sur eklablog ou sur un autre site c'est :
Passez le curseur ici avec l'image a côté au lieux d'apparaître quand je survole le texte.
Merci par avance.