Guten Tag

Ich kenne CSS-Codes, die bestimmte Effekte mittels Mouseover hervorrufen können.
z.B.:

.bild:hover {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
.bild {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
 

Wie kann ich diese auf meiner Jimdo-Seite einbinden beziehungsweise aktivieren. Ich freue mich auf jede mögliche Hilfe. Ihr müsst davon ausgehen, dass ich keine Ahnung von CSS habe; die Codes sind lediglich "geklaut".

mit liebem Gruss
Tschudi

Hallo az
Vorab mal vielen Dank für die schnelle Antwort mit dem Hinweis zum Link; ich werde mich nächstens darin vertiefen.

mit liebem Gruss
Stefan

Hallo Andreas

Leider hilft mir auch das Tutorial nicht weiter. Da ich, wie erwähnt nur den Code kenne und von CSS keine Ahnung habe, weiss ich nicht weiter.
Ich habe den CSS-Code in den Head-Bereich geschrieben und den Style-Tag am Anfang und am Ende eingeschrieben. Nun hoffte ich, dass sich die Bilder entsprechend bei Mouse-over ändern. Kannst du mir weiterhelfen; im Voraus vielen Dank.

mit liebem Gruss
Stefan

Hallo Andreas
Danke für die schnelle Antwort.
Der html-Code für das Bild auf meiner Website sieht wie folgt aus. Was muss ich da ändern beziehungsweise ergänzen, damit das Bild den gewünschten Effekt bekommt; oder wie kann ich den CSS-Code, den ich im heat-Bereicht hinterlegt habe, aktivieren? Oder liege ich da völlig falsch. Danke im Voraus für die Antwort.

mit liebem Gruss
Stefan

<a href="http://www.schuleerstfeld.ch"><img src="http://u.jimdo.com/www400/o/s7e4c6fd4df740750/img/ibce8d25f3cf58868/1436815431/std/image.jpg" alt="" onmouseover=
"src='http://u.jimdo.com/www400/o/s7e4c6fd4df740750/img/i28ae1f20c765a602/1436815441/std/image.jpg'" onmouseout=
"src='http://u.jimdo.com/www400/o/s7e4c6fd4df740750/img/ibce8d25f3cf58868/1436815431/std/image.jpg'" /></a>
 

Hallo Andreas
Ich melde mich mal wieder. Ich habe mich in der Zwischenzeit versucht schlau zu machen; ist mir aber nicht gelungen.
WO muss ich nun diese Codes auf meiner Jimdo-Seite einfügen?

lg Stefan

Hallo Andreas
Ich habe es wirklich geschafft; vielen vielen Dank.
Was muss ich nun bei den Codes ändern, wenn ich den Effekt "02-Einzoomen" umsetzen möchte? Hier der Link zur Website mit dem gewünschten Effekt: http://james-star.com/answers/de/css3-ef...en-uebergaenge/
oder der Code nachfolgend:

.container:hover .bild {
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
.container {
overflow:hidden;
width:200px;
height:150px;
}
.bild {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
 

Die Effekte 04 (Ränder und Schatteneffekte), 05 (Randverzerrung), 06, 07 gehen problemlos. Sie haben den gleichen Namen ".bild".
Vielen Dank im voraus für deine Hilfe.

mit liebem Gruss
Stefan

Hallo Andreas

Ich melde mich nochmals.
Wie muss ich nachfolgenden html-Code ändern ...

html-Code

<a href="http://www.schuleerstfeld.ch" target="_top">
<img class="bild" src="http://u.jimdo.com/www400/o/s7e4c6fd4df740750/img/ibce8d25f3cf58868/1436815431/std/image.jpg" alt="" />
</a>
 

... um auf diesen CSS-Code hinzuweisen?

CSS-Code

.container:hover .bild {
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
.container {
overflow:hidden;
width:200px;
height:150px;
}
.bild {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
 

Vielen Dank im voraus für die Antwort.

mit liebem Gruss
Stefan

Lieber Andreas
Vielen Dank für deine Hilfe. Beides klappt nun bestens: ".bild" und ".container" konnte ich auf einer Jimdo-Testseite mit Erfolg ausprobieren.
Ich habe noch einen letzten Wunsch offen. Wie kann ich nachfolgenden Effekt auf meine Jimdo-Seite einbinden:

</div>
  <div class="col-sm-6">
 
    <!-- colored -->
    <div class="ih-item square colored effect3 top_to_bottom"><a href="#">
        <div class="img"><img src="images/assets/rect/3.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end colored -->
 
  </div>
</div>
<!-- end Top to bottom-->
 

Hier der Link zur Seite:
http://gudh.github.io/ihover/dist/index.html

mit liebem Gruss
Stefan

Hallo Andreas

Danke für die Infos. Ich glaube, dass dies doch eine Nummer zu gross für mich ist.
Ich bin schon sehr zufrieden, dass ich dank deiner Hilfe nun mit ".bild" und ".container" meine Webseiten bearbeiten kann. Nochmals herzlichen Dank für die wertvollen Infos.
Meine Testseite wird kaum interessant sein. Ich habe sie lediglich angelegt, um nicht auf eine meiner Hauptseiten etwas kaputt zu machen; trotzdem der Link.

mit liebem Gruss
Stefan
http://tschudi61-testseite.jimdo.com

Hallo Andreas

So einfach geht das!!??
Gibt es eine Möglichkeit, dass "Innenleben" deiner Testseite (http://ihovertest.jimdo.com/ihovertest/) zu sehen?
Noch eine Frage: Bei einem CSS-Effekt überlagern sich bei mir die Bild- und Textelemente, wenn die Fensterbreite verkleinert wird. Kann man dieses Problem irgendwie lösen? Es sieht nicht schön aus (siehe Bilder 1 - 3)

mit liebem Gruss
Stefan

Hallo, Andreas,

im Gegensatz zu Stefan finde ich das leider überhaupt nicht einfach ;)

Wenn ich diese tollen Dinger auf einer Unterseite haben möchte, was muss ich bei <body> CSS-Klassen eintragen? Muss ich erst etwas für das gesamte Design (Cape Town) ändern?

Irgendwie hab ich überhaupt keinen Plan und wäre sehr dankbar für Hilfe :)

Beste Grüße

Barbara

Hallo Andreas
Hallo Barbara

Meine Aussage "So einfach geht das!!??" war ironisch gemeint, weil es von Andreas so schnell und schön gemacht wurde. Es ist nach wie vor eine Nummer zu gross für mich. Die Effekte sehen aber einfach toll aus. Darum würde mich das Innenleben der Testseite interessieren (verstehe aber, dass das Passwort für die Anmeldung geheim bleibt).

Zitat von az_ im Beitrag #19

---

Es muss nur ein Eintrag im Head-Berich Deiner Seite gemacht werden, der auf das richtige CSS-Skript verweist. Danach kannst Du die html-Skripte so wie sie unter den einzelnen Beispielen angezeigt sind in ein html-Widget einsetzen und es funzt.

---

Hallo, Andreas,

danke erstmal für die schnelle Antwort, aber leider mache ich wohl etwas falsch.

Ich habe jetzt bei <head> bearbeiten eingegeben:

<link type="text/css" media="all" href="http://51023348.swh.strato-hosting.eu/_test/ihover/dist/styles/main.css" rel="stylesheet"/>
<style type="text/css">
/*<![CDATA[*/
    
    /*iHover-CSS Anpassungen
    -----------------------------*/
    
.ih-item {margin: 30px;}
    
.ih-item.circle.effect1:hover .spinner {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.ih-item.circle.effect1:hover .info {
  opacity: 1;
}
 
 

und erhalte die Meldung: Die HTML-Struktur ist ungültig und wurde nicht gespeichert.

Was habe ich falsch gemacht?

Beste Grüße

Barbara

SUPER und vielen Dank - ich hab`s noch nicht angepasst, aber die Bilder sind schon mal da :)

Eine Testseite habe ich nicht - ich teste das auf einer versteckten Unterseite; bin grad dabei, die ganze Seite neu zu machen..., aber vielleicht sollte ich mal eine Testseite anlegen, denn hier sind ja noch so viele tolle Anregungen.

Jedenfalls vielen Dank nochmals!

Hallo Andreas
Hallo @Feemina

Ich melde mich kurz dazwischen. Ich habe es zu 95 % geschafft. Ich habe die nachfolgende Zeile zuerst nicht im head eingegeben; nach der Eingabe klappte es.

<link type="text/css" media="all" href="http://51023348.swh.strato-hosting.eu/_test/ihover/dist/styles/main.css" rel="stylesheet"/>
 

Jetzt möchte ich den Effekt noch verlinken. Kommt die URL nicht anstelle des "Gartenhages"?

<a href="#">
 

Danke im voraus für die Antwort.

mit liebem Gruss
Stefan