So sollte es gehen <figure>

[Alex]

Hallo,

ich habe mich nochmals hingesetzt und es mit <figure> getestet, ich gehe davon aus, dass du es so meinst?

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

  
<figure style="background-image: url(img/klein/hallo.jpg)">  
<img src="img/klein/hallo_sw.jpg" alt="Hallo"/>  
</figure>  

Was du damit meinst:

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.

weiß ich leider nicht und wüsste auch nicht, wie ich das umsetzten und formatieren muss.