Frage Elemente passen sich nicht an Inhalt an etc.

[Cosimoir]

Vorschlag:

main ul li {
  float:left;
  position:relative;
  border:solid 10px rgba(250,250,250,1); /* mit Option für transparenten Rahmen */
  box-sizing:border-box
}
main ul li a img {
   display:block;
   width:100%;
   /*padding:10px;*/ /* entfällt */
   /*box-sizing:border-box*/ /* entfällt */
}

main a:hover .outer {
  visibility:visible
}

https://jsfiddle.net/spicelab/1ndubev4/

hm ich seh jetzt keinen Vorteil gegenüber der vorigen Lösung. Danke für die Mühe aber ich denk ich freunde mich lieber mit dem padding an

 

[SpiceLab]

hm ich seh jetzt keinen Vorteil gegenüber der vorigen Lösung.

Doch, dass :hover nicht mehr zwischen den Bildern greift, was dem padding geschuldet war:

damit die transparente Fläche nicht über den eigentlichen Bildrand hinausreicht wenn man padding verwendet

Danke für die Mühe aber ich denk ich freunde mich lieber mit dem padding an

Ganz wie Du willst.

Und setze abschließend den (Präfix)Status von "Frage" auf "Erledigt".

 

[Cosimoir]

stimmt ja sorry hab den faden verloren, du konntest nicht wissen, dass ich vorhatte zusätzlich zu den Abständen auch border einzustellen. In der Hinsicht ist die vorige Lösung besser, weils ja quasi eine transparenter Rahmen ist. Ansonsten wäre das eine einfache Lösung gewesen