Ich möchte auf einer Unterseite (Portfolio mit unterschiedlichen Arbeitsbeispielen) bei einem Mouseover den Inhalt von Bild zu Text ändern - am besten auch mit einem Blureffekt.
Die Bilder werden über Total CMS über eine Adminseite eingebunden.
Kann ich denn bildspezifische Texte bestimmten Bildern zuordnen?
Zum Beispiel:
Beim Mouseover über Bild A wird dieses unscharf und es erscheint Text A (passend zum Bild)
Auf der Seite von BigWhiteDuck ist dieses Prinzip bei der Übersicht seiner Stacks auch gut zu sehen oder auch im Weaverspace von Joe.
In Foundation 6 gibt es dazu den Hover Swatch. In Kombination mit anderen Swatches (z.B. dem Background Swatch) solltest du einen solchen Mouse Over Effekt mit oder ohne Blur Effekt hinbekommen
Ich habe da gerade Unsinn geschrieben, sorry. Das kommt davon, wenn man sich in unterschiedlichen Systemen bewegt…
Du konfigurierst über z.B. zwei Background Swatches zwei Zustände (einen inaktiven und einen aktiven, wenn die Maus über dem Element liegt) und diese beiden Zustände weist du per Custom Class dem jeweiligen Inhalt zu. Unten im Beispiel. Im Beispiel ist auch nicht nur der Background mit einem Cover-Effekt belegt, sondern auch die Form über einen Transition Effekt im Padding Swatch
Da muss ich mich erstmal reinfuchsen - ist ziemlich komplex. Aber bevor ich das mache, noch eine Frage: Kann ich das dann auch auf TCMS Gallery2 anwenden mit sich unterscheidenden Inhalten?
Ich habe mal einen Screenshot eines Beispiels gemacht, wie ich mir das vorstelle:
ok. Den Blureffekt hatte ich schon per CSS hinbekommen, aber ich weiß noch nicht, wie ich die Caption nach oben schiebe, aber das geht vielleicht irgendwie …
