Bildergalerie Untertitel - Design Rome

06.06.2016 10:30
avatar  Rahel
#1
Ra

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


 Antworten

 Beitrag melden
06.06.2016 11:51 (zuletzt bearbeitet: 06.06.2016 11:52)
avatar  az_
#2
avatar
az_

hallo @Rahel,

...das sieht sehr professionell aus, was Du da gemacht hast. Gratulation!

Zu Deiner Frage - versuch mal folgenden Code:

1
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


 Antworten

 Beitrag melden
06.06.2016 12:29
avatar  Rahel
#3
Ra

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?


 Antworten

 Beitrag melden
07.06.2016 09:53
avatar  Rahel
#4
Ra

Hallo,
Danke für die schnellen Antworten.... leider habe ich von JQuery so gut wie keine Ahnung. Hast du da zufällig einen Codeschnipsel parat? (Alt auslesen und ins Content reinschreiben)


 Antworten

 Beitrag melden
19.06.2016 12:01 (zuletzt bearbeitet: 19.06.2016 13:49)
avatar  az_
#5
avatar
az_

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


 Antworten

 Beitrag melden
22.10.2016 19:45
avatar  Sina
#6
Si

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


 Antworten

 Beitrag melden
25.10.2016 16:19 (zuletzt bearbeitet: 16.01.2017 14:48)
avatar  az_
#7
avatar
az_

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


 Antworten

 Beitrag melden
25.10.2016 17:41
avatar  Sina
#8
Si

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


 Antworten

 Beitrag melden
26.10.2016 14:44 (zuletzt bearbeitet: 06.02.2017 23:01)
avatar  az_
#9
avatar
az_

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


 Antworten

 Beitrag melden
26.10.2016 20:09
avatar  Sina
#10
Si

@az_
Mir fehlt die Erfahrung und das Wissen, aber das generelle Verständnis und vor allem das Interesse ist da.
Hab's jetzt verstanden und hinbekommen.
Vielen Dank für deine Hilfe :)


 Antworten

 Beitrag melden
06.02.2017 12:44
avatar  Rahel
#11
Ra

Hallo,
war eine Weile nicht hier und habe deine Frage daher nicht gelesen, Entschuldigung.
Inzwischen scheint das Problem ja gelöst... Ansonsten einfach direkt anfragen.

Grüße
-Rahel


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!