Businesscards mit Hover-Effekt abbilden (+ funktionstüchtig für mobile Sites)

Hallo Community!

Also ich krieg das einfach nicht hin!
Ich soll für ein Ärztezentrum eine Website wie diese hier 1:1 nachbauen: http://www.med22.at/
Ich habe mir den Quellcode angesehen: ist eine statische Seite mit diversem Javascript dazu. Das Ganze schaut zwar nett und einfach aus, funktioniert aber zB. schon mal auf Tablet und Smartphone nicht. Daher ist es für mich keine Option, dem Kunden sowas "nachzubauen". (Abgesehen davon bin ich leider auch kein Programmierer.:o)
Irgendwelche Ideen dazu, ob man das mittels Contao (zumindest annähernd ähnlich) hinkriegen könnte?

man könnte sowas wie hier verwenden... Nachteil IE unter 10 wird nicht unterstützt.
oder vielleicht so... wie hier das kommt dem Hover Effekt näher.

Ja, sieht zwar nett aus, funktioniert aber auch auf Smartphone/Tablet nicht ..... ich werde das wohl anders lösen müssen. Aber trotzdem danke!

Ich denke das wird nur was mit js bzw. und jquery.

Wenn er einen Container klickt öffnet sich ein ein solches Fenster. Die Lösung mit CSS wird nicht so funktionieren, weil mobile Geräte kein Hover so unterstützen. Schließlich schiebt man ja den Finger nicht die ganze Zeit über die Seite, wie bei der Maus. Da bräuchtest Du dann einen anderen Trigger.

Das beste wäre quasi so:

Auf der Seite Artikel anlegen und class'en/ids vergeben und mit jquery die große anzeige verstecken. Bei einem Klick auf die kleine Anzeige, wird der die Große Anzeige geöffnet und angezeigt. Oder vielleicht geht es über eine lightbox Lösung.

Also, so würde ich versuchen das Problem zu lösen.

Ja, so ähnlich werde ich es eh machen. Danke jedenfalls!

siehe http://www.wdi.ag/de/kontakt.html

Die Infos zu den Mitarbeitern werden allerdings bei "klick" angezeigt (und nicht bei hover). Hat den Vorteil das es für Mobile und Desktop dieselbe Steuerung ist.

Hey Bas,

wie hast du das mit dem Team-Effekt in Contao gemacht?

Einmal das Zuordnen der Bereiche (Personen automatisch verschieben) und der Effekt jeden Mitarbeiters?

In dem vorliegenden Beispiel ist die Basis Metamodels und demzufolge ist das Template handmade.

Wenn ich sowas nun mit Contentelementen umsetzen wollte .. dann würde ich mittels "Semantic HTML5" jeweils einen div einfügen und in diesem ein CE Bild und ein CE Text positionieren .. der Rest ist CSS und JS.