Bitte geben Sie einen Grund für die Verwarnung an
Der Grund erscheint unter dem Beitrag.Bei einer weiteren Verwarnung wird das Mitglied automatisch gesperrt.
Bildergalerie Untertitel - Design Rome
Hallo
ich arbeite derzeit an einer Seite im Design "Rome". Hier habe ich eine Bildergalerie erstellt, die als Raster dargestellt ist. Jedes Bild verlinkt auf eine weitere Unterseite.
Die Darstellung der Bilder ist nun per Mouseover so geregelt, dass über transition, transform und ease in ein gedämpftes Ranzoomen mit gleichzeitiger Alpha-Verkleinerung passiert. Also Bild wird größer, ein bisschen transparenter (in meinem Fall dunkler, da dunkler Hintergrund) und das Ganze mit ease in-Übergang... zu sehen auf http://www.architektenarea.com/sedcards/
Mein Problem allerdings: Ich habe den Bildern im Backend (teilweise) Untertitel gegeben und möchte diese gern als Hover-Effekt mit anzeigen lassen. Ist das bei dem Design möglich? Wie kann ich die Untertitel ansprechen?
Hat jemand eine Idee für mich?
Dankeschön schonmal
-Rahel

hallo @Rahel,
...das sieht sehr professionell aus, was Du da gemacht hast. Gratulation!
Zu Deiner Frage - versuch mal folgenden Code:
2
3
4
5
6
7
8
9
10
#gallery_thumb_4660732154 a:hover::after {
content:"test";
position:absolute;
margin-top:-100px; margin-left:20px;
z-index:9999;
font-size:56px;
color:white;
}
...der schreibt Dir einen Inhalt über das Thumbnail-Bild:
Habe ich Dich richtig verstanden?
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Hallo @az_ ,
Danke für das Kompliment!
Super Code! Vielen Dank schonmal Jetzt habe ich immerhin schonmal eine Möglichkeit, überhaupt Text draufzubekommen....!
2 Fragen hätte ich noch dazu:
-Gibt es auch eine Möglichkeit, die eingetragenen Untertitel/Alt-Texte zu verwenden?
-Kann ich das auf dem Bild zentrieren? Also ohne konkrete Pixelangaben?

Hallo Rahel,
...fürs letztere nicht auf die schnelle, aber fürs Zentrieren habe ich jetzt doch noch etwas ganz einfachen gefunden:
#gallery_thumb_4663553354 a:hover::after {
content: "SCHAARTOR. \A Hamburg";
display: block;
text-align: center;
}
...zentriert wunderbar:
Ich hatte nur das "display: block;" vergessen, deshalb hatte es zuerst nicht funktioniert.
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Hallo Rahel,
der Beitrag hier ist zwar schon einen Moment her, aber vielleicht liest du das ja noch.
Ich bastel gerade an meiner ersten Website mit Jimdo. Und ich bin schon lange auf der Suche nach genau diesem Effekt, den du auf deine Bilder angewandt hast. Den leichten Zoom und das Einblenden von Schrift.
Wärst du so lieb, deinen Code hier zu posten? :)
Lieben Gruß,
Sina

Hallo @Sina,
...vielleicht hilft Dir das hier: http://redesign-berlin-seminar.jimdo.com...c-m-10681442621
LG, az
Galerie Vorschaubild abgedunkelt on hover / Hover-Effekt
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Danke @az_ für die Antwort!
Ich verstehe nur leider nicht ganz was ich mit dem Code jetzt machen muss. Kommt der in den Head? In ein HTML-Widget? Und muss ich etwas darin durch die entsprechenden Bildlinks ersetzen?
Entschuldige diese Anfängerfragen, aber ich bin eben genau dies... :)

Hallo @Sina,
...das ist reiner CSS-Code, und den musst Du tatsächlich wie Du schon dachtest in den Head-Bereich einfügen: http://www.redesign-berlin.de/jimdo-tutorials/.
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
- Allgemeines
- Regeln für die Benutzung des Forums
- HowToDo ( = so geht´s)
- Jimdo User-Forum
- Eure Jimdo-Webseiten - Vorstellungsrunde
- Bugs, Workarounds und Anregungen
- Jimdo-Elemente
- Allgemeines
- Jimdo-Shop
- Jimdo-Specials (Tools, Widgets, HTML und CSS)
- Suchmaschinenoptimierung (SEO)
- Sonstiges
- Tutorials
- "OffTopic"-Themen
- "Übernahme" von Beiträgen aus dem offiziellen Jimdo-Forum...
- Nutzungsbedingungen und Haftungsausschluss
- Jimdo-Blog
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!