@@Alex:

nuqneH

ich habe noch eine andere Idee, meine Bilder liegen nun alle in SW und Farbe vor. Die SW Bilder haben ein _sw mit dran. Wenn ich nun mit der Maus über das Bild fahre,

Und wenn ein Nutzer gar nicht mit der Maus navigiert, sondern per Tastatur?

ist es möglich mit jQuery das _sw dran zu hängen und wenn ich wieder mit der Maus weg gehe, es zu löschen?

Dazu brauchst du kein JavaScript, schon gar kein jQuery.

<a href="…" style="background-image: url(img/klein/<?php [code lang=php]echo $bilder['grafik']; ?>_sw)">
  <img src="img/klein/<?php echo $bilder['grafik']; ?>" alt="<?php echo $bilder['titel']; ?>"/>
</a>[/code]

Ich habe mal angenommen, das Ding ist ein Link. Ansonsten könnte es statt des a-Elements auch div bzw. figure sein.

Statt des Hintergrundbilds (das ich in diesem Fall tatsächlich ins Markup schreiben würde) könnten es auch auch 2 img-Elemente sein, die absolut in dem Containerelement (das dafür relativ positioniert wird) werden.

a[style^=background]  
{  
  display: inline-block;  
}  
  
a[style^=background] img  
{  
  display: block;  
  opacity: 0;  
  transition: opacity ease 0.5s;  
}  
  
a[style^=background]:hover img,  
a[style^=background]:focus img  
{  
  opacity: 1;  
}

Das a-Element über den Attributselektor [style^=background] zu selektieren, wäre eine Möglichkeit.

Da sich opacity animieren lässt, hab ich gleich mal einen saften Übergang (transition) eingebaut.

Mein Aufbau sieht so aus

echo "<img src="img/klein/".$bilder['grafik']."" alt="".$bilder['titel']."">";

  
Ich würde – wie oben gezeigt – nicht das Markup mit PHP ausgeben lassen, sondern nur die Daten. Das macht den Code übersichtlicher, nicht zuletzt weil man die ganzen Anführungszeichen nicht escapen muss.  
  
Qapla'

-- 
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)