Beim "Hovern" eines Produktbildes Text anzeigen

[Ale]

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

[psren]

Theoretisch geht das nur mit CSS.

du hast 2 Elemente (jetzt kommt Beispielcode)

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

CSS

.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.

[Ale]

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

[andreasisaak]

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