CSS: Bildlink, darüber div, aber Bildlink immer anklickbar?

[ElMariachi]

An alle CSS-Profis:

Wie ist es möglich folgendes umzusetzen:

Ich habe ein Bild (400x400px). Dieses Bild verlinkt zu einer anderen Webseite. ÜBER dieses Bild würde ich gerne ein Div erstellen. ABER auch an der Stelle von diesem Div soll der Bildlink anklickbar sein. Welche CSS-Anweisung muss ich also dem Div über dem Bildlink geben, damit zwar der z-index höher ist, aber auch an der Stelle des Divs der Bildlink anklickbar ist?

[ways2web]

bsp:

<figure class="image_container">
  <a href="bild.jpg">
     <img src="bild.jpg">
       <div class="lupe">
        <img  src="lupe.png">
       </div>
  </a>
</figure>

da brauch man kein z-index


demo gern auf anfrage.. weil es auf meienr beta-site ist.

[ElMariachi]

Aha! Also doch figure-class...

Werde es ausprobieren. Würde mich freuen, wenn du mir den Link schicken könntest, dann kann ich es mir live ansehen. Danke.

[ElMariachi]

Bekomme es leider nicht hin.

Ich versuche es mal zu erklären:

Ich habe ein jQuery Akkordeon. Quellcode:

<div id="st-accordion" class="st-accordion">
                    <ul>
                        <li>
                           1: <a href="#">About<span class="st-arrow">Open or Close</span></a>
                            <div class="st-content">
                                <p>Hier steht der Content, wenn das Akkordeon ausgeklappt ist</p>
                            </div>
                        </li>

Bei 1: ist der Link "#" enthalten, der das Akkordeon "ausfährt" und den Inhalt anzeigen lässt.
Das funktioniert alles wunderbar.

Was ich aber gerne hätte:
- li ist ein Bild
- Bei Hover erscheint anderes Bild
-> Soweit noch kein Problem

- Es gibt noch ein neues Div (div id=Beschreibung), das oben in den Quellcode eingefügt werden muss.
Hier aber nun das Problem: Das Bild bzw. li ist verlinkt: "#". Ich möchte, dass das neue Div (#Beschreibung), dass dann sichtbar über dem Bild liegen muss, genauso verlinkt ist, wie auch das Bild...

Also muss entweder das komplette Div auch verlinkt werden. -> Wäre kein Problem, aber dann funktioniert der Hover nicht mehr.
Also muss die Lösung sein, dass #Beschreibung zwar optisch über dem Bildlink, bzw. li liegt, aber der Link vom Bild trotzdem funktioniert.


Ich hoffe man versteht einigermaßen, worauf ich hinaus will... Wäre über JEDE Hilfe super dankbar!

[brandtmarke]

Mir würde es grade helfen, wenn du mal eine Skizze posten köntest. Das li bzw das (Hintergrund?)-Bild dessen sind ja nicht verlint sondern das a-Element. Ich verstehe auch nicht so recht, was es mit dem Beschreibungs-DIV auf sich hat