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