Jimdo-Elemente » Verlinkte Bilder hervorheben

24.08.2018 10:53

Timneh
#1

Ti

Hallo,
zunächst zur Info: Ich bin absoluter Neuling auf diesem Gebiet und bitte um Nachsicht!
Ich bin gerade dabei, meine Website aufzubauen und habe diese noch im Offline-Modus! Jetzt habe ich eine Bildergalerie erstellt und jedes einzelne Bild verlinkt. Jetzt möchte ich, dass für den Besucher der Seite etwas deutlicher wird, dass er nur auf das jeweilige Bild zu klicken braucht, um in die entsprechende Kategorie zu gelangen. Gibt es da etwas? Ich hatte auch schon an das Einfügen von Button gedacht. Aber letzteren würde ich dann eher gerne auf dem jeweiligen Bild platzieren, was ja nicht geht. So ging es nur neben den Fotos und das nimmt mir zuviel Platz weg.
Vielleicht gibt es ja eine elegante Möglichkeit? Ich habe zwar schon einiges gesehen, wo die Bilder dann leicht milchig werden oder im Gegenteil klarer werden beim Überfahren mit der Maus. Aber wie man das nennt und ob das geht und für mich als Laien umzusetzen ist, weiß ich nicht.
Vielen Dank im voraus für eure Hilfe!
Cornelia

Antworten

Beitrag melden

#2

25.08.2018 01:03 (zuletzt bearbeitet: 05.09.2018 15:22)

butterman007
#2

bu

butterman007

Hi Cornelia

Das kannst du unter Umständen auch mit einem CSS-Script umsetzen. Dazu musst du den "div-Tag" deiner Galerie im CSS-Code entsprechend benennen und danach den dazugehörigen "img:hover-Tag" gleich anfügen. Dann fügst du ein CSS-Filter ein, zum Beispiel "Blur" (also verschwommen). Dann sollten alle Bilder der Galerie verschwommen sein, sobald der Curser darüber geht. Das Ganze könnte beispielsweise so aussehen:

1
2
3
4
5
6
7
8
9
10
 

<style type="text/css">
 
div.j-module.n.j-gallery img:hover {
    webkit-filter: blur(7px); /* Chrome, Safari, Opera */
    filter: blur(7px);
}
 
</style>
 
 

Du kannst die Zahl 7 bei 7px entsprechend anpassen. Steht für die Stärke des Blur-Effekts.

Ein Tutorial über CSS-Code auf einer Jimdo-Website und wie du ihn einfügst findest du hier:

https://www.redesign-berlin.de/jimdo-tutorials/css-formatierungen/jimdo-css/#cc-m-5982828964

Anstatt "Blur-Filter", kannst du auch andere Filter verwenden. Hier ein Link dazu:

https://www.w3schools.com/cssref/playit.asp?filename=playcss_filter&preval=blur(5px)

Allerdings würde ich zuerst mal testen, welche Filter bei welchen Browsern funktionieren. Ausserdem musst du auch bedenken, dass bei Mobil-Geräten diese Filter ja unter Umständen auch nicht funktionieren, bzw. nicht zum Einsatz kommen.

Gruss
Butterman

Antworten

Beitrag melden

#3

05.09.2018 14:48

Timneh
#3

Ti

Timneh

Hi Butterman,
danke für deine Antwort. Sorry, dass ich erst jetzt antworte. Irgendwie hatte ich deine Antwort am Folgetag nicht gesehen und dann war ich erst im Urlaub.
Ich denke, ich werde dies so nicht umsetzen können. Ich habe überhaupt keinen blassen Schimmer von CSS-Skript und "div-Tag" etc. :-) Ich habe viel zu viel Schiss, hier etwas falsch zu machen und meine Seite zu zerhauen. Ich suche dann halt nach einer anderen Möglichkeit, ist nicht so schlimm!
Trotzdem vielen Dank für deine Hilfe!
LG Cornelia

Antworten

Beitrag melden

#4

05.09.2018 15:21 (zuletzt bearbeitet: 05.09.2018 15:27)

az_
#4

az_

Hallo @Timneh,

...da kannst Du nicht viel falsch machen. Setz einfach den Code in den Jimdo CSS-Editor ein (Menü > Einstellungen > Head bearbeiten > Gesamte Webseite oder Unterseite).

Markieren: strg/cmd+a (all/alles)
Kopieren: strg/cmd+c (copy/kopieren)
Einsetzen: strg/cmd+v (paste/einvügen)

Wenn der Code nicht passt, passiert gar nichts. Wenn er passt, kannst Du Dich freuen!

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