C'est possible une bordure INTERIEUR dans une div avec du css

Bonjour,

Je voudrais faire des jolies images avec un effet au survol et sans utiliser le css3.
Ce qui serait bien c'est une une bordure interne de 2pixels mais sur l'interieur de la div pas sur l'exterieur comme quand on ecrit :
border: solid 2px #000;
ca ca ferait bien une bordure noire de 2px sur l'exterieur

Je voudrais eviter d'avoir a creer une autre image de background pour le survol.

C'est pas possible pas vrai? Si?

Salut,

pas sûr d'avoir bien compris mais tu pourrais essayer :

div {
	padding: 3px;
	width: 322px;
	border: 1px solid #000;
}
img {
	border: none;
	display: block;
}
a {
	border: 3px solid #fff;
	display: block;
}
a:hover, a:focus, a:active {
	border: 3px solid orange;
}

<div>
	<a href="http://www.alsacreations.com"><img src="http://www.alsacreations.com/css/img/logo-alsacreations.png" width="316" height="66" alt="Alsa" /></a>
</div>

Bonjour,

Les bordures s'affichent à l'extérieur de l'image puisque qu'on leur ajoute une bordure. Il existe aussi "outline" qui normalement doit se trouver "à cheval" entre l'intérieur et l'extérieur et dont l'épaisseur ne devrait pas être prise en compte dans la mise en page (mais ça ne marche réellement que chez Webkit).

A moins d'un bricolage extraordinairement imbécile du genre : Au survol de l'image, un élément vide et de taille correspondante à l'image moins les valeurs de bordures… pfuiiiiii… s'affiche par dessus avec des bordures qui correspondent à la différence de taille. pfuiiiiii… Kof Kof (excusez moi, je tousse) - Exemple qui peut fonctionner mais… quelle foutue galère.

Bonjour,

Un bricolage, un:

<a class="lol">
  <img />
  <span></span>
</a>

.lol {
  position: relative;
  float: left; /* Pour adaptation à la largeur du contenu */
}
.lol img {
  display: block; /* un vertical-align:middle ça marche aussi */
}
.lol span {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.lol:hover span, .lol:focus span {
  border: solid 3px rgba(255,0,0,.5);
}

Testé vite fait sous Firefox. Ne marchera jamais dans IE6 mais osef. Devrait être compatible IE7 moyennant une ou deux corrections.

Encore plus fun, en virant le SPAN:

.lol {
  display: inline-block;
}
.lol img {
  display: block;
}
.lol:hover, .lol:focus {
  border: solid 10px rgba(255,0,0,.5);
}
.lol:hover img, .lol:focus img {
  margin: -10px;
}

Pas testé en dehors de Firefox.