Une bordure d'image lors de son survol

**dhillig** · 11/11/2014, 16h17

Bonjour,
Malgré pas mal de recherches sur le net, et mode d'emploi dreamweaver; impossible de trouver comment ajouter une bordure à une image lors de son survol.
Le "a:hover" ne fait que rajouter une bordure horrible au bas de l'image.
Suis-je obligé de passer par des JQuery (que je ne maitrise pas) pour ce simple effet ?
Merci pour votre aide (et dans la foulée, je pose une seconde question

dhillig

**ryan** · 11/11/2014, 16h46

Yop!

CSS3 permet d'ajouter des bordures ombrées avec le box-shadow. Un bon petit tuto ici:http://www.html5-css3.fr/css3/ombre-css3-box-shadow

**dhillig** · 11/11/2014, 17h39

Slt Ryan,
Merci pour ta réponse et le lien. Box-shadow : ça me parle, c'est déjà bien

Je fais un test asap histoire de cliquer sur (je l'espère) "résolu".
Bonne fin de journée.
dhillig

**NoSmoking** · 11/11/2014, 21h53

Bonjour,

Malgré pas mal de recherches sur le net, ...

les mots clés devaient vraiment être mauvais

A tout hasard je te mets ce lien Les meilleurs cours et tutoriels CSS, pas besoin d'aller chercher très loin...

Concernant ton besoin, un simple petit exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype>
<html lang="fr"><head>
<meta charset="UTF-8">
<title>Bordure sur :hover</title>
<style>
a img{
  border:1px solid transparent;  /* évite un décalage sur le :hover */
}
a:hover img{
  border:1px solid #CCF;
  box-shadow:0 2px 4px 2px #CCC; /* pour faire CSS3 ;) */
}
</style>
</head>
<body>
<a href="http://www.developpez.com/"><img src="http://www.developpez.net/template/images/logo.png" alt="developpez.net"></a>
</body>
</html>

**dhillig** · 12/11/2014, 00h43

"Mon" NoSmoking toujours là

GREAT MAN !!!
Je teste tout ça ASAP !!!
Merci pour vos réponses !!!
dhillig

**dhillig** · 12/11/2014, 21h43

Bonsoir à tous,
J'ai testé les box-shadows (THX Ryan). Yes, ça marche, mais je n'ai pu les appliquer qu'à des <div> et non à une simple image. Toujours ce petit blanc inférieur au niveau de la photo (lors de l' "encadrement" au survol). Pour le coup, obligé de rajouter une marge inférieure à la classe de l'image. Et là, c'est bon (encore que je ne pense pas que ce soit la bonne méthode ma marge inférieure). Mais je me vois mal attribuer une <div> pour chaque photo

Et là, j'attends une réponse du genre : "bah c'est simple..."
Mais j'ai encore appris pas mal de choses avec ces "box", GREAT.
Je vais tester ce que NoSmoking propose.
Vous êtes d'une rapidité étonnante (les réponses) donc MERCI à tous. Malheureusement j'ai peu de temps pour tester vos solutions la semaine. Donc désolé pour mes réponses qui peuvent être tardives (je parle entre autre de la réponse de Ryan sur les ancres

Bonne soirée !
dhillig
@NoSmoking : mes mots clés étaient du genre "rajouter une bordure+survol", ce genre de chose

Merci pour ton lien !

**dhillig** · 12/11/2014, 23h00

Histoire réglée (Thx NoSmoking), mais avant de cliquer sur résolu, j'aimerais une réponse de Ryan (ou de NonSmoking) sur l'autre possibilité (celle de Ryan). Parce que mon but n'est pas simplement de trouver une(s) solution(s) à mes probs... mais aussi celui d'apprendre !
Merci à tous !!!!!!!!!
dhillig
PS : si vous avez un lien sur la gestion/l'incorporation de JQuery, je suis preneur. Parce que un JQuery, ça va, trois (sur la même page)... bonjour les dégâts !
THX Ryan & NoSmoking. Bonne soirée à vous !
PS : je ne suis pas contre une journée de formation sur les JQuery (sur Paris)

Une bordure d'image lors de son survol

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager