• Bordure-ombre

    Pour Janine, un code de base, sur une image dans ses dimensions:700x525px; le survol lui ajoute une bordure blanche et une ombre, avec une transition de 0.5 seconde.

    Ces codes est à écrire, tel quel, dans un premier temps, pour vérifier qu'ils s'affichent bien sur votre blog; ensuite, vous remplacez l'adresse de mon image, en bleu, au rapport 4/3, par la votre.

    Un rappel important: ne recopiez pas ces codes sur une page de traitement de texte (Word...) mais sur une feuille de bloc-note car, dans le premier cas, il devient illisible par  le code source (<>)

    Deux écritures possible (au moins): la première, plus simple, s'adapte à toutes dimensions d'images.

    <p style="text-align: center;"><img id="j1" src="http://ekladata.com/LA_nPMG4HtieN818C2x-72ggWlY.jpg" alt="" /></p>
    <style><!--
    #j1{ transition:all 0.5s linear;}
    #j1:hover{border:6px ridge white; box-shadow:4px 4px 8px black;}
    --></style>

     


     

    Le seconde écriture, plus "compliquée", l'image étant placée en fond de paragraphe mais permet ensuite plus de possibilités.

    <p id="j2">&nbsp;</p>
    <style><!--
    #j2{width:700px; height:525px; margin:10px auto; background:url('http://ekladata.com/LA_nPMG4HtieN818C2x-72ggWlY.jpg'); transition:all 0.5s linear;}
    #j2:hover{border:6px ridge white; box-shadow:4px 4px 8px black;}
    --></style>