• Image au survol texte-CSS

    Afficher une image au survol d'un texte, d'un lien,
    ça peut être sympa !!!

    Juste en html et CSS, comme l'exemple ci-dessous:


    Passez le curseur ici Mike

    CODE CSS

     

     

     

    Code HTML



    « Tableau à onglets-CSSDeezer illimité »

    Tags Tags : , , , ,
  • Commentaires

    13
    Dimanche 18 Octobre 2015 à 18:22
    12
    Stessy
    Mercredi 22 Avril 2015 à 13:10
    Salut tout le monde
    11
    Samedi 15 Février 2014 à 16:52

    Salut!

    il faut mettre les 2 codes : html + CSS
    Laisser un lien (url) ou on peut voir et analyser le code installé...!

    10
    Samedi 15 Février 2014 à 14:40
    julie

    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

    9
    Dimanche 2 Février 2014 à 15:18

    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....

    8
    Dimanche 2 Février 2014 à 14:48

    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>&nbsp;</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>&nbsp;</p>

    7
    Vendredi 31 Janvier 2014 à 22:11

    Merci du tuyau , j'en apprends des choses ici , merci

    6
    Vendredi 31 Janvier 2014 à 21:34

    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"> 

    5
    Vendredi 31 Janvier 2014 à 21:07

    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 !!!!

    4
    Vendredi 31 Janvier 2014 à 19:59

    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>

    3
    Vendredi 31 Janvier 2014 à 18:59

    pas moyen,  chez moi ça marche pas

    le code se transforme kan je fais ok

     

    <p>&lt; a class="imag" href="#"&gt; 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

    2
    Vendredi 31 Janvier 2014 à 17:54

    Ah..! c'est l'éditeur qui ajoute le lien de l'article quand on met #
    le code est:

    < a class="imag" href="#"> 

    1
    Vendredi 31 Janvier 2014 à 15:30

    bONJOUR !!!

    A koi correspond cette adresse  en 1e ligne du html

     

    /image-au-survol-texte-css-a50246722#

     

    merci



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


Version standard

Poursuivre l'affichage en version standard (ordinateur),

cliquer ci-dessous

Clic ici

(Puis fermer cette fenêtre, en haut à droite)