Beim "Hovern" eines Produktbildes Text anzeigen

Hallo. Ich weiß nicht ob das jemand schon einmal mit Isotope umgesetzt hat, aber gesehen habt ihr es schon bestimmt. Hier ein Beispiel: http://wpshower.com/demo/?theme=imbalance

Wie würdet ihr die Sache angehen (oder könnt es aus eurer Erfahrung sagen)?
Benötige ich dazu ein jquery bzw. mootools-Plugin?

Alexander

Theoretisch geht das nur mit CSS.

du hast 2 Elemente (jetzt kommt Beispielcode)

HTML-Code:

---

<div class="to-hover">
  <div class="deinProduktbild...">......</div>
  <div class="showIfHovered">......</div>
</div>

---

CSS

Code:

---

.to-hover {
  position: relative;
}

.to-hover .showIfHovered {
  display: none;
  position: absolute;
  top:0;
  left: 0;
}

.to-hover:hover .showIfHovered {
  display: block;
}

---

Beim Hovern des Elternelements wird das eingeblented. Jedoch funktioniert bei alten ie die Pseudo :hover nur für <a>-Elemente. Das könnte man wenn man auf den ie6 achten muss mit Javascript nachrüsten.

Zu dem Code oben: Das bekommt man noch besser hin von Semantik, Barrierefreiheit etc, war jetzt nur mal ein Beispiel zum Verständnis.

Hi vielen Dank. Ich werde es in den nächsten Tagen mal ausprobieren.

Schau dir einfach mal das JS und den Quellcode bei stennie Photography an. Da passiert genau das was du brauchst!