"MACH DEINE SEITE JETZT FIT,
    DER nächste SOMMER KOMMT BESTIMMT!"

    Für eine Galerie oder auch andere Grafiken kannst Du diesen netten Hover-Effekt einsetzen. Füge dafür folgenden Code in Deinen Head-Bereich ein:

    <style type="text/css">
    /*<![CDATA[*/

    /* Deine Slideshow */

     

    .transparenz {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    opacity: .6;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);

     

    }

    .transparenz:hover {
    opacity: 1.0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);

     

    }

    /*]]>*/
    </style>


    Und folgenden Code in das entsprechende Content (in ein Widget/HTML-Modul):

     

    <a href="http://Jimdo.com/"><img class="transparenz" src="http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/img/i0a10db6cdf020023/1350304461/std/image.jpg" alt="" width="320" height="185" /></a>

     

    Die Verknüpfung (blau markiert) könnt ihr auch durch eine eigene Verlinkung ersetzen. Wenn die Grafik nicht verlinkt werden soll, so löscht Du einfach

    den folgenden Teil aus dem Code heraus:

     

    <a href="http://Jimdo.com/">


    Der Bildlink (rot markiert) kann durch eine eigene Grafik ersetzt werden.

     

    Die Größe (grün markiert) der Grafik, kannst Du ganz individuell anpassen. Werden die beiden Werte gelöscht, so übernimmst Du automatisch die Originalgröße Deiner Grafik.

    Kommentare: 33
    • #33

      LeMétre (Montag, 11 April 2016 21:11)

      @tithenon
      kein Problem einfach im Head bei
      .transparenz {
      opacity:1.0; auf 0.6 verändern
      und bei
      .transparenz:hover {
      opacity: 0.6; auf 1.0
      sollte das ganze umdrehen

    • #32

      tithenon (Freitag, 19 Februar 2016 11:00)

      Hi, super Tutorial.
      Aber ich bräuchte es genau umgekehrt: Das Bild sollte normal angezeigt werden und wenn ich mit der Maus drüber fahre, sollte die Transparenz auftauchen. Geht das????

    • #31

      floriangombocz (Dienstag, 30 Dezember 2014 18:19)

      HI
      Erstmal Danke für deine Hommage -->Echt super Tipps !!
      Habe nur noch eine Frage: Wie kann ich beim Hover-Effekt um das Bild noch eine Schatten legen ??
      lG

    • #30

      mirsberger (Donnerstag, 03 Juli 2014 09:16)

      Hallo, erstmal ein dickes Lob - eine tolle Seite mit super tollen Tipps! Danke!
      Aber nun meine Frage: Mir werden 2 Bilder angezeigt, untereinander. Ich habe das Foto auf meiner Startseite entsprechend mit dem Widget versehen und nun wird mir das "normale" Foto und darunter das Foto mit Effekt angezeigt. Wo liegt mein Fehler?
      Danke für die Antwort!
      Lieben Gruß von Annett

    • #29

      Franny (Mittwoch, 02 Juli 2014 16:51)

      Gute Frage, das würde mich auch interessieren :-) von schwarz/weiß auf Farbe

    • #28

      Jennifer Wagner (Montag, 30 Juni 2014 11:38)

      Hallo :)
      super Tutorial! Hätte nur eine Frage: ist es auch möglich, dass die Bilder transparent und schwarzweiß sind und dann farbig werden?
      Vielen Dank schonmal!
      Liebe Grüße
      Jenni

    • #27

      sheandhercamera (Freitag, 20 Juni 2014 13:45)

      Super Tutorial. Hat wunderbar geklappt und sieht toll aus. Danke dafür :D

    • #26

      jlangner8 (Freitag, 02 Mai 2014 19:12)

      Großes Lob an Dich! Super Arbeit, tolle Seite und was das Beste ist; Endlich Tutorials die verständlich sind! Vielen Dank dafür!

      Hab zu diesem noch eine Frage. Gibt es die Möglichkeit den Hover Effekt auch umzuwandeln? Also genau andersrum. Bisher wird das transparente Bild scharf, wenn man drüber fährt. Kann man ein scharfes Bild auch transparent darstellen, wenn man drüber fährt? Außerdem würde ich gerne einen Text einbauen, den man nur sieht, wenn man mit der Maus drüber geht.

      Du würdest mir sehr helfen!

      Vielen Dank! LG

    • #25

      prosa-isch (Donnerstag, 17 April 2014 20:14)

      Hi,

      besteht irgendwie die Möglichkeit, wenn die Bilder verlinkt sind, dass sich wenn man darauf klickt ein neuer Tab mit der Zieladresse öffnet?

      Liebe Grüße und viel Dank im Voraus!

    • #24

      ta-m (Freitag, 20 September 2013 13:03)

      Hey, hätte ich selber darauf kommen können. Ich danke Dir sehr herzlich!!

    • #23

      Deine Slideshow (Donnerstag, 19 September 2013 09:43)

      @ Sadet Tam, lege einfach ein Spaltenmodul an und füge den Code in jede einzelne Spalte in ein Widget/HTML-Modul ein.
      So ist es auf dieser Seite auch umgesetzt ;-)

      Viele Grüße.

    • #22

      Sadet Tam (Freitag, 13 September 2013 13:57)

      Hey, danke zunächst für Deine tollen Tutorials. Meine Frage an Dich bzgl. Hover-Effekt:

      Welchen Code muss ich bei zb- 2-4 Bildern eingeben, die nicht untereinander sondern unmittelbar nebeneinander stehen sollen?

      Viel Grüße.

    • #21

      Deine Slideshow (Donnerstag, 12 September 2013 08:24)

      @ Maria, ja das geht.. setze dem Code einfach <center> voran und schließe ihn mit </center> ab ;-)

      @ alexbonn, ja das geht auch. Der Code sieht dann so aus:

      <div style="position: absolute; top: XXpx; align: center; z-index: 1; margin-left: XXpx;">
      <a href="http://XXX.de/"><img class="transparenz" src="http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/img/i0a10db6cdf020023/1350304461/std/image.jpg" alt="" width="320" height="185" /></a>

      Die X-Werte musst Du dann nur noch deinen Vorstellungen entsprechend anpassen.

      Viele Grüße.

    • #20

      alexbonn (Mittwoch, 04 September 2013 08:41)

      Hey,
      besteht die Möglichkeit, dass man den Hover-Effekt bei einem Bild anwenden kann, das irgendwo auf der Seite platziert ist?

      Also wie bei deinem Tutorial " Dein Logo- egal wo", mit eingebauten Hover-Effekt.

      Liebe Grüße und vielen Dank vorab.

    • #19

      Maria Fritsch (Montag, 17 Juni 2013 17:50)

      Hei ^^
      ne Frage. Ich hab die Bilder mit dem Transparenz Effekt in Spalten drin. Jetzt sind die bilder aber rechtsbündig. Ich möchte aber das sie in den Spalten zentriert sind. Irgendwie bekomme ich das nicht richtig hin ^^

      Danke schonmal für die Hilfe. :)
      Liebe grüße

    • #18

      Deine Slideshow (Donnerstag, 16 Mai 2013 12:08)

      Der Code sieht dann so aus:

      <div id="zoom">
      <img class="transparenz" src="DEINE GRAFIKADRESSE" alt="" width="" height="" />

      Viele Grüße.

    • #17

      eszett-bvs (Mittwoch, 15 Mai 2013 19:14)

      Eine Frage: wie kriege ich es hin, dass der Bildvergrößerungseffekt und der Hover Effekt gleizeitig wirken?

    • #16

      Deine Slideshow (Mittwoch, 08 Mai 2013 13:19)

      @ Stergios Nanos, der obere Teil kommt in ein Widget/HTML-Modul und der Rest in den Head-Bereich. Für weitere Fragen wende Dich bitte an den Urheber, da es ich ja um seine Tutorials handelt.

      Viele Grüße.

    • #15

      Stergios Nanos (Mittwoch, 24 April 2013 19:41)

      Danke für den tollen Tipp --> http://www.olivergast.de/wp-content/demos/transitions/index.html

      Diese Vorschau Boxes sind einfach spitze. Ich habe allerdings Probleme mit dem Einbau..welcher Tell muss in den header rein und welcher in das widget? Und wo können die Verlinkungen und Grafiken hinterlegt werden? Ich würde auch gerne den Effekt von diesen drei Boxes auf deiner Startseite einbauen...sieht wirklich spitze aus! kannst du mir da kurz info geben?

      Danke Dir!

    • #14

      Best Juicer (Montag, 22 April 2013 15:55)

      This is an excellent write-up! Thank you for sharing with us!

    • #13

      Alex Grischkow (Montag, 08 April 2013 14:52)

      Vielen, vielen Dank!

    • #12

      Deine Slideshow (Montag, 08 April 2013 14:38)

      Hallo Alex, das ist eine Art Vorschau-Box. Wenn Du magst, dann schau' mal hier vorbei, da gibt es vergleichbare Boxen: http://www.olivergast.de/wp-content/demos/transitions/index.html

      Viele Grüße.

    • #11

      Alex Grischkow (Montag, 08 April 2013 14:31)

      Auf Ihrer Hauptseite http://deine-slideshow.jimdo.com/, unten, haben Sie drei Bilder mit Verlinkung zu den Tutorials (DEIN LAYOUT, DEINE SCHRIFTART, HOVER-EFFEKT TRANSPARENZ). Sind das Bilder oder Slider? Wenns Bilder sind, dann ist die Frage, wie man den Text so einblenden kann? Wenns Slider sind, wie kann ich dann Transparent-Effekt einfügen?

      Grüße

    • #10

      Deine Slideshow (Montag, 08 April 2013 12:07)

      Alex, willst Du den Text in Deinem Slider eingeblendet haben? Wenn das so ist, dann schau' einmal hier vorbei: http://ecomstyle.de/Nivo-Slider-Hinweise-und-Einstellungen/. Dort werden die Einstellungen nochmals detailliert aufgeführt.


      Viele Grüße.

    • #9

      Alex Grischkow (Donnerstag, 04 April 2013 13:11)

      Hallo,

      wie auf der Hauptseite von unten, wenn man mit der Maus drüber geht.

      Danke

    • #8

      Deine Slideshow (Donnerstag, 04 April 2013 11:53)

      Hallo Alex, wo und wie soll der Text eingeblendet werden?

      Viele Grüße.

    • #7

      Alex Grischkow (Mittwoch, 03 April 2013 15:21)

      Hallo,

      wie kann ich noch ein Text einblenden lassen? So wie bei Ihnen auf der Hauptseite bei den unteren drei Bildern (z.B. HOVER-EFFEKT TRANSPARENZ)?

      Vielen Dank im Voraus

      Grüße Alex

    • #6

      Deine Slideshow (Freitag, 21 Dezember 2012 10:45)

      Ja genau, lade ein Bild auf einer versteckten Seite hoch und kopiere (Rechtsklick auf das Bild) die Grafikadresse. Diese fügst Du dann, anstelle meines Bildlinks (rot markiert), in den Code ein.

      Viele Grüße.

    • #5

      Markus Stöckl (Freitag, 21 Dezember 2012 08:22)

      muß ich ein Bild hochladen, und wie krieg ich dann die Adresse des Bildes

    • #4

      Deine Slideshow (Montag, 03 Dezember 2012 14:57)

      Du musst es noch per Style anweisen, also den oberen Code in den Head-Bereich einfügen.

      Viele Grüße.

    • #3

      Block planter (Montag, 03 Dezember 2012 14:12)

      Mein bild ist anfangs einfach nicht transparent und mein code sieht so aus:
      <a href="http://block-planter.Jimdo.com/"><img class="transparenz" src="http://u.jimdo.com/www52/o/s982c8a6b65ac1910/img/i255ac5490480e782/1354018575/std/zu-klein-zum-scannen-einfach-anklicken.png"
      alt="" /></a>
      Was mach ich falsch

    • #2

      Deine Slideshow (Samstag, 01 Dezember 2012 22:41)

      Ja genau, einfach untereinander.

      Viel Spaß.

    • #1

      RENE BLÜMEL (Freitag, 30 November 2012 13:10)

      wie gesagt toll deine tips.
      was muss ich beachten wenn ich nun mehrere deiner codes in den headerbereich einfügen will?
      muss ich die nur einfach unter einander schreiben?

      danke für deine Mühe