Lupe als Rollover über Bilder

[Vinzenz Mai]

Hallo Felix,

Dein Vorhaben klingt nach einer typischen JavaScript-Spielerei, denn mit reinen CSS-Mitteln halte ich Dein Vorhaben für schlecht umsetzbar, bzw. für schlicht unmöglich.

Warum nicht?

Tabelle und verschachtelte leere <span>-Elemente? Machst Du Witze?

ich halte es für nicht besonders sinnvoll, sich zuallererst an solchen Sachen aufzuhalten. Für mich ist sowas nebensächlich. Die Idee zählt und die ist von dem, was Du kritisierst, unabhängig.

Ich schrieb "schlecht umsetzbar". Dass es offensichtlich nicht unmöglich ist - OK. Aber willst Du Deine Lösung allen Ernstes als sinnvoll propagieren?

Ein genauerer Blick in den Quellcode zeigt Dir, dass sich die vorliegende Idee problemlos auf den Einsatz eines einzigen zusätzlichen Elementes, das zur Anzeige der Lupe sowieso benötigt wird, reduzieren lässt:

<ul class="gallery">  
  <li>  
    <a href="photos/kuh.jpg"><img class="thumbnail" src="photos/kuh_thumbnail.jpg" title="" alt="Kuh" width="200" height="150" /><span class="magnifier" title="Bild vergrößern"></span></a>  
  </li>  
  <li>  
    <a href="photos/schwein.jpg"><img class="thumbnail" src="photos/schwein_thumbnail.jpg" title="" alt="Schwein" width="200" height="150" /><span class="magnifier" title="Bild vergrößern"></span></a>  
  </li>  
  <li>  
    <a href="photos/esel.jpg"><img class="thumbnail" src="photos/esel_thumbnail.jpg" title="" alt="Esel" width="200" height="150" /><span class="magnifier" title="Bild vergrößern"></span></a>  
  </li>  
  <li>  
    <a href="photos/elefanten.jpg"><img class="thumbnail" src="photos/elefanten_thumbnail.jpg" title="" alt="Elefanten" width="200" height="150" /><span class="magnifier" title="Bild vergrößern"></span></a>  
  </li>  
</ul>  

mit leicht modifiziertem CSS reicht fürs erste aus:

    ul {  
        padding: 0;  
        margin: 0;  
        list-style-type: none;  
    }  
    li {  
        padding: 0;  
        margin: 0;  
        display: inline;  
    }  
    img {  
        border: none;  
    }  
    .gallery a {  
        position: relative;  
        display: inline-block;  
        outline: none;  
        text-decoration: none;  
    }  
    .gallery .magnifier {  
        display: block;  
        position: absolute;  
        width: 200px;    /* Ausmaße ausreichend für Hintergrundbild */  
        height: 150px;  
        top: 0px;  
        left: 0px;  
        background: url(images/magnifier.png) no-repeat -200px -200px;  
    }  
    .gallery .magnifier:hover {  
        background: url(images/magnifier.png) no-repeat top right;  
    }  

Prinzip:
a-Element für die Großanzeige des Bildes, relativ positioniert.
span-Element für Lupe mit gleicher Größe wie das Bild und absolut exakt über dem Bild positioniert. Lupe ist Hintergrundbild, standardmäßig aus dem Anzeigebereich hinausgeschoben, bei hover in den sichtbaren Bereich verschoben.

Die Anpassung an die Anforderung im Ausgangsbeitrag, zentrierte Anzeige ist leicht möglich. die Position des Hintergrundbildes bei Hover ist einfach zentriert.

Ist das wirklich "schlecht umsetzbar"? Find' ich nicht.

Freundliche Grüße

Vinzenz