Hover-Effekt über komplette Serie von Thumbnails

[muplo]

Hey,

ich bin neulich beim Stöbern auf der awwwards.com-Seite auf ein Portfolio eines Fotografen gestoßen.
Beim navigieren durch die Gallerien ist mir aufgefallen, dass sobald man mit der Maus über ein Thumbnail einer Serie gefahren ist, alle zu der Serie passenden Bilder diesen Hover-Effekt erhalten haben. So soll der Betrachter wissen, dass es sich bei den Bildern um eine Serie handelt.

Hier die Seite. Einfach über ein Thumbnail einer Serie gehen und ihr werdet sehen was ich meine:

http://www.marekmusil.com/people/

Kann mir jemand sagen, welches Plugin oder welche Technik hierfür verwendet wird?
Ich wäre über jede Hilfe sehr dankbar!!

Lieben Gruß
Muplo

 

[Kirzz]

Die Galerien haben eine eindeutige ID <div id="name-der-id" ..."> die vermutlich für die Verbindung sorgt. Der Hover Effect ist einfaches CSS das hier per div gelöst wurde:
<a href="url" style="width: 000px; height: 000px;"></a>
<div style="display: none;width: 000px; height: 000px;" class="overlay"></div>
Wenn der Cursor über das Bild fährt überlagert das Overlay das Bild. Die CSS Einstellungen des Overlay beinhalten vermutlich ein transparentes PNG, oder eine Farbe die per opacity gesetzt wurde.

Wie das ganze gruppiert funktioniert, kann ich nicht sagen. Vielleicht jquery? Mit einfachem HTML / CSS ist das nicht machbar.

 

[muplo]

Hey,

ich habe mit firebug selber nachgeschaut und konnte es auch nachvollziehen, wie es aufgebaut ist. Nur frage ich mich, bei welchem Plugin man so was realisieren kann, denn man möchte ja schließlich nicht jedes mal neue CSS-Regeln für neu-hochgeladene Fotos definieren. Weißt du da weiter?

 

[Der_Soso]

so etwas läßt sich mit jquery oder JavaScript ganz gut einrichten. Mit Css3 würde das theoretisch auch gehen, stelle ich mir aber ziemlich fruckelig vor.
Das Prinzip: Was eigeblendet wird, ist als absolute positionierter Container mit transparenten Hintergrund vorhanden aber ausgeblendet. Der Hover ist verknüpft mit einer Methode die ausgeblendete Ebene auf sichtbar zu schalten.

Schöner wäre die Seite, wenn dieser Effekt animiert wäre, sprich wenn die Ebenen sich langsamer einblenden würden.