Jimdo-Specials (Tools, Widgets, HTML und CSS)

17.06.2020 18:10

Maria12
#1

Ma

Hallo Zusammen,

ich bin u.a. durch dieses Forum auf folgende Seite gestoßen: http://gudh.github.io/ihover/dist/index.html#square3
Ich würde z.B. gerne unter Demo Square den Hover effect 13 und unter Demo circle den Hover effect 1 auf meiner Homepage nutzen.
Ganz unten heißt es "How to you use it". Leider verstehe ich nicht, wo genau ich die Codes einfügen soll und was ggf. hinzufügen ist??
Kann mir bitte jemand weiterhelfen?

Antworten

Beitrag melden

#2

18.06.2020 08:08

subcon
#2

subcon

Du fügst zuerst die CSS im Head ein, also unter "Head bearbeiten" die Zeile

1
 
<link href="styles/ihover.css" rel="stylesheet">

und auf der Seite wo du dann das entsprechende Bild einfügen möchtest nimmst du das HTML-Widget und fügst dann dort den HTML-Code ein:

1
2
3
4
5
6
7
8
9
 
 <div class="ih-item circle effect1"><a href="#">
        <div class="spinner"></div>
        <div class="img"><img src="images/assets/2.jpg" alt="img"></div>
        <div class="info">
          <div class="info-back">
            <h3>Heading here</h3>
            <p>Description goes here</p>
          </div>
        </div></a></div>
 

Dann brauchst du nur die jeweiligen Textpassagen und den link zum "Hintergrundbild" des Effekts auf deine anpassen...

Antworten

Beitrag melden

#3

18.06.2020 13:13

Maria12
#3

Ma

Maria12

Es wird leider kein Bild angezeigt - siehe Screenshot

Antworten

Beitrag melden

#4

18.06.2020 13:39

subcon
#4

subcon

Ich seh auch hier keinen Screenshot...
Schick mir doch eine Mail mit dem Screenshot und den Link zu der Seite..!

Antworten

Beitrag melden

#5

22.06.2020 14:45

Maria12
#5

Ma

Maria12

Das Hochladen meiner Screenshots hat nicht funktioniert.

Leider habe ich die Hover aus dem Link nicht zum Laufen gebracht......

Jetzt habe ich einen einfachen Code gefunden:

<a href="https://www.dein-Link.de"><img src="Original-Bilddatei" onmouseover="this.src='Mouseover-Bilddatei'"

onmouseout="this.src='Original-Bilddatei'" />

Der funktioniert am PC sehr gut, leider passen sich die Bilder nicht automatisch an das Handydisplay an.
Gibt es einen Zusatzcode, den ich für die Responsivedarstellung ergänzen kann?