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

    Hast Du Lust auf Vorschauboxen wie auf der Startseite? Dann füge einfach den ersten Code in den Head-Bereich und den zweiten Code in ein Widget/HTML-Modul ein.

    DEINE SCHRIFTART
    DEIN ANKER (jetzt für alle Browser)

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

    .vbox {
    background: #cedce7;
    position: relative;
    margin: 5px auto;
    width: 297px;
    height: 140px;
    display: block;
    filter:alpha(opacity=90);
    -moz-opacity: 0.90;
    opacity: 0.90;
    -webkit-box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 3px 3px 3px 3px;
    overflow:hidden;

     

    }

    .vbox .image {
    position: absolute;
    width: 297px;
    height: 140px;


    }

    .vbox a, .vbox a:hover {
    text-decoration: none;

     

    }

    .vbox .slogan {
    position: absolute;
    width: 297px;
    height: 140px;
    text-transform: uppercase;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;


    }

    .vbox .slogan {
    background: #000;
    top: 220px;
    font-size: 16px;
    color: #fff;
    padding: 5px 0;
    -webkit-box-shadow: 0 0 5px #333;
    -moz-box-shadow: 0 0 5px #333;
    box-shadow: 0 0 5px #333;


    }

    .vbox:hover .slogan {
    color: #fff;
    top: 110px;
    opacity: 0.7;


    }


    /*]]>*/
    </style>

     

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


    .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)"; /* IE8 */
      filter: alpha(opacity=60); } /*IE7 und kleiner*/

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

     

    }

    /*]]>*/
    </style>

        <div class="vbox">
            <a href="DEIN LINK"><img class="transparenz" src="GRAFIKADRESSE" alt=""
            width="297" height="142" /></a>
            <div class="slogan">
                <center>
                    DEIN TEXT
                </center>
            </div>

    Kommentare: 41
    • #41

      Albert (Dienstag, 31 Januar 2017 15:08)

      Super Tutorial!
      Eine Frage: Wie kann man das Bild größer anzeigen lassen?

    • #40

      Sigi (Mittwoch, 18 November 2015 08:44)

      Hallo
      Ich möchte gerne bei Mouseover das 3 Symbole übereinander zur Auswahl stehen.
      Brauche das z.B. für Weine "Symbol leicht mittel schwer"
      Danke für Eure Hilfe
      LG Sigi

    • #39

      Katrin Wolff (Donnerstag, 19 März 2015 21:56)

      hallo an Alle, also ich habe rausgefunden, wie man die Texte in den Tranparnten Feldern mehrzeilig bekommen kann.
      <div class="vbox">
      <a href="DEIN LINK"><img class="transparenz" src="GRAFIKADRESSE" alt=""
      width="297" height="142" /></a>
      <div class="slogan">
      <center>
      DEIN TEXT
      <center> (STATT </center>)
      DEIN TEXT
      </div>

      nur wie man die Schrift unterscheidlich groß bekommt, weiß ich immer noch nicht.
      Viel erfolg Euch allen!

    • #38

      Katrin Wolff (Mittwoch, 18 März 2015 18:06)

      Hallo vielen Dank, tolle Seite!
      wie kann ich denn bei den Vorschauboxen die Texte ändern,
      z.B. das die Bezeichnung des Produktes größer ist, und dann darunter z.B.
      der Betrag in kleiner steht? Bei mir hat alles nur eine Größe,
      und man kann den Text nicht in Zeilen untereinander positionieren, oder?
      Danke und lieben Gruß
      Katrin

    • #37

      Deskaround, Thimon Triebel, Luise Letzner und Katharina Sack GbR (Mittwoch, 04 Februar 2015 13:43)

      Moin! Erst mal auch von mir: Vielen Dank für die tolle Seite!
      Ich hätte da jetzt auch noch mal eine Frage: Wie können die Bilder jetzt "sauber" verlinkt werden? Momentan ist es ja so dass der Link verschwindet, sobald die Farbfläche und Text vollständig über das Bild blenden. Das heißt das, was sich über das Bild legt, ist nicht verlinkt. Wenn man es jetzt so macht wie du hier im Beispiel, dann muss man ja extrem schnell sein um den Link zu erwischen, bevor er vom überblendenden Text verdeckt wird.

      Gibt es da eine Möglichkeit, dass auch die Fläche mit Link versehen wird?
      Beste Grüße!
      Thimon

    • #36

      Katrin Wolff (Donnerstag, 15 Januar 2015 15:07)

      ich habe keine Ahnung von html..was ist "dein LINK" und "Grafikadresse"? Sonst hast Du es immer so toll erklärt.. ;) Bin da echt ein Banause..

    • #35

      marco-fotografie (Dienstag, 23 Dezember 2014 00:46)

      Hallo, ich versuche eben diesen Effekt anzuwenden, aber mit einem größeren Bild. Mein Plan ist so: Das Bild soll mit voller größe angezeigt werden und beim mouseover soll der Text "ansehen" erscheinen. Wie bekomme ich das hin?

    • #34

      animeconnect (Samstag, 13 Dezember 2014 14:04)

      hallo! ich habe gerade versucht den 1. html code in den head-bereich einzufügen, aber da steht als "Die HTML-Struktur ist ungegültig und wird nicht gespeichert"... ich bin nicht besonders erfahren im umgang mit html kann mir bitte jemand helfen? :/

    • #33

      Enrico (Sonntag, 31 August 2014 19:27)

      Schön guten Tag könnte mir jemand helfen ich habe die Vorschaubox eingebaut nur hätte ich gern ,wenn man drauf klickt ein neues Fenster auf geht externe Seite so zu sagen kann mir jemand da helfen. wäre echt super email danny3570@live.de

    • #32

      Rico (Mittwoch, 27 August 2014 17:22)

      Schön guten ich habe den Code eingebaut und es geht super nur hätte ich es gern als Popup so das ein neues Fenster auf geht .
      kann mir da jemand helfen bitte wäre echt super . glg Rico

    • #31

      koeln-personaltrainer (Donnerstag, 31 Juli 2014 23:55)

      Ich habe leider das selbe Problem wie beautex-friseure. Leider funktionieren die Textboxen nicht, der Link führt zu einer Seite von Jimdo " Upps, die bist nicht mehr eingeloggt, melde dich einfach auf deiner Jimdopage an.

      Ich bitte schnell um Hilfe.

    • #30

      Motodrom Jag-Teile (Sonntag, 06 Juli 2014 17:02)

      Hallo,

      wie schonmal erwähnt echt geniale Seite, weiter so !

      Gibt es die Möglichkeit das Textfeld auf 2 Zeilen zu erweitern ? Muss im Head Bereich doch zu ändern sein ?!
      Danke für Tipps und viel Erfolg

      MfG

    • #29

      konstantin-goretzki (Donnerstag, 24 April 2014 14:26)

      Erstmal super Tutorial ;)
      Nachdem ich den Code selbst auf meiner Hompage benutze, möchte ich noch etwas hinzufügen.
      In der Zeile
      border-radius: 3px 3px 3px 3px;

      setze ich immer gerne den Wert überall auf 0px, dies hat den Vorteil, dass sich der Rand nicht bewegt,
      wenn man nämlich mit der Maus herüberfährt und der Text dann eingeblendet wird,
      wird dieser Rand nämlich verdeckt.
      Dadurch finde ich es störend, ist aber Geschmackssache.
      Vielleicht gehts den ein oder anderen genauso.

      Gruß

      Konstantin

    • #28

      Nicole (Freitag, 11 April 2014 00:48)

      Hallo an Alle,
      erst einmal Danke für diese tollen Tutorials. Ich konnte die Vorschauboxen fast erfolgreich einbauen. Allerdings wird bei mir der Text nicht angezeigt. Hat irgendjemand eine Idee, wo der Fehler liegen könnte? Ich habe die Codes so eingefügt wie beschrieben.

      Freue mich von Euch zu hören.
      Herzlichst,
      Nicole

    • #27

      Thorsten Schöpp (Freitag, 14 März 2014 16:26)

      Hallo alle zusammen!
      Das ist eine gute Frage Kühn! Das wüßte ich auch gerne!
      Habe es auch noch nicht herausgefunden.
      Meine Frage:
      Wie kann man denn einstellen, daß das Textfeld immer da ist und wenn man mit der Maus über das Bild fährt der Text verschwindet?
      Also genau umgedreht wie es hier der Fall ist!
      1000 Dank im Voraus!
      Gruß Thorsten

    • #26

      kuehn-photography (Dienstag, 11 März 2014 20:55)

      Hallo zusammen!
      ich habe diese Vorschauboxen bereits auf einer Seite verbaut und möchte auf einer anderen Unterseite diese in einer anderen Größe haben. Wenn ich die Größe im Header ändere, dann verändert sich die Größe auf allen Seiten. Wie kann ich es für jede Seite einzeln bestimmen.
      Vielen Dank im Voraus!
      Gruß
      Kühn

    • #25

      konstantin-goretzki (Donnerstag, 06 März 2014 18:06)

      @r-ara-ger

      Das ist mir auch schon oft passiert.
      Einfach in der Header Zeile ganz runterscrollen bis an das Ende und dann den Code einfügen.
      Es gibt nämlich 2 Scrollbaren :)

      Hoffe ich konnte helfen :)

      Grüße

      Konstantin Goretzki

    • #24

      t-ara-ger (Sonntag, 23 Februar 2014 19:43)

      Würde den code gerne nutzen aber Jimdo sagt, der enthält keine gültige HTML Struktur und wird somit nicht gespeichert ??
      Bitte um hilfe >.<

    • #23

      cs-grafikdesign (Samstag, 15 Februar 2014 23:30)

      Kann man den Text auch abändern, daß er statt Versalien, Groß- und Kleinschreibung anzeigt?
      Das wäre super.
      Viele Grüße,
      Clemens

    • #22

      Schüßler Clemens (Dienstag, 04 Februar 2014 22:53)

      Für die Leute die von html keine Ahnung haben ist es ein bischen missverständlich.
      Ich hab jetzt die beiden codes eingebaut: wie gehts jetzt weiter: Was ist die Grafikadresse, was ist "Dein Link" etc etc. Wenn ich da noch eine detailiertere Anleitung bekäme wäre ich dankbar.

      Viele Grüße,
      Clemens

    • #21

      TestTeil (Donnerstag, 23 Januar 2014 23:44)

      Hallo,

      Voraus möchte ich mal ein FETTES D A N K E !!! schicken. Ist mit Sicherheit die beste Tutorial Seite für jimdo.

      Zu meiner Frage.... ich möchte gerne die Vorschau Boxen mit einer Lightbox kombinieren. Bin leider nicht wirklich fit im CSS, habe aber geschafft diesen Code zu erstellen (funktioniert im Chrome und Firefox aber bei IE wird es nicht richtig dargestellt...)

      <div class="vbox">
      <a href=""><img class="transparenz" alt="" /></a>
      <p id="cc-m-imagesubtitle-1111" class="cc-m-image-resizewrapper cc-imagewrapper cc-m-image-align-1">
      <a data-href="http://u.jimdo.com....../image.jpg" rel="lightbox" href="javascript:;"><img src=
      "http://u.jimdo.com...../image.jpg" style="width: 176px; height: auto;" alt="" /></a>
      </p>
      <script type="text/javascript">
      //<![CDATA[
      jimdoGen002.regModule ("module_imageSubtitle", {"data":{"hyperlink":"", "hyperlink_target":"", "pinterest":"0","id":1111}, "variant":"default", "selector":"#cc-m-imagesubtitle-1111"});
      //]]>
      </script>
      <div class="slogan">
      <center>
      TEXT
      </center>
      </div>
      </div>


      Wenn du oder jemand anderer sagen könnte wo der Fehler liegt oder wie man ihn besser aufbauen könnte wäre es echt sehr sehr sehr NETT.

      DANKE + LG

    • #20

      Peter Pelikan e.V. (Montag, 30 Dezember 2013 18:55)

      Kann man anstatt einer Verlinkung einen Anker integrieren?

    • #19

      lauras-photodesign (Sonntag, 15 Dezember 2013 16:18)

      Ok die Verlinkung habe ich mittlerweile hinbekommen. Aber wie bekomme ich mehrere Bilder nebeneinander?
      Die stellen sich immer untereinander auf... ?? :-S

    • #18

      lauras-photodesign (Sonntag, 15 Dezember 2013 12:29)

      Hallo, wie kann ich eine Grafikadresse und Linkadresse hinterlegen? Bzw. wie muss diese aussehen?
      Ich habe unter "DEIN LINK" den Seitennamen von der HP eingetragen, der wird aber nicht erkannt.

    • #17

      habibi-hotel (Sonntag, 08 Dezember 2013 16:33)

      Kann man die Vorschau Boxen auch Verkleinern um die anzupassen? Wenn ich versuche die zu verkleinern dann ist rechts oder link ein grauer Balken

    • #16

      Fabian Winkler (Mittwoch, 04 Dezember 2013 19:59)

      Würde den code gerne nutzen aber Jimdo sagt, der enthält keine gültige HTML Struktur und wird somit nicht gespeichert ??

    • #15

      fotoscheu (Samstag, 30 November 2013 16:36)

      Hallo, wie kann man die Schriftart für den eingeblendeten Text ändern? Vielen Dank

    • #14

      Deine Slideshow (Montag, 14 Oktober 2013 12:26)

      @ beautex-friseure, die Größe änderst Du im oberen Code an dieser Stelle:

      width: 297px;
      height: 140px;

      Das Hintergrundbild solltest Du dann auch entsprechend anpassen.
      Ich hab deine Seite mal auf meinem Handy aufgerufen. Die Boxen wurden korrekt dargestellt und die Verlinkungen haben auch funktioniert, also alles iO..

      Viele Grüße.

    • #13

      beautex-friseure (Samstag, 12 Oktober 2013 13:12)

      Leider funktionieren die Textboxen nicht über die mobile Darstellung, der Link führt zu einer Seite von Jimdo " Upps, die bist nicht mehr eingeloggt, melde dich einfach auf deiner Jimdopage an.

      Ich bitte um Hilfe.

    • #12

      beautex-friseure (Samstag, 12 Oktober 2013 12:37)

      Ich würde gerne die Größe der Boxen ändern wie?

      Danke

    • #11

      vertraute-erde (Donnerstag, 22 August 2013 22:28)

      Hallo, ich habe Deinen Code bei mir mal eingebunden und getestet.
      Da ich die neu eingeführten Features dann gern auf diversen Browsern teste habe ich nun festgestellt, daß Dein Code bei dem IE9 nicht reibungslos funktioniert. Der Hover Effekt wie er in Opera, FF, Safari usw. gut funktioniert , ist im IE9 nicht vorhanden. Es werden Text und Umblendung auf das Hintergrundbild sofort durchgeführt. Die Transition Zeiten werden hier nicht umgesetzt. Ich weiß nicht, ob das auch auf höheren IE Versionen ebenso ist.

      Gibt es eventuell für die aktuellen IE Versionen auch einen extra Code?

      Viele Grüße

    • #10

      Deine Slideshow (Montag, 29 Juli 2013 12:37)

      Benutze hier einfach das Spaltenmodul :-)

      Viele Grüße.

    • #9

      Selma (Donnerstag, 20 Juni 2013 12:01)

      ich kann meine nicht nebeneinander machen nur untereinander :/

    • #8

      Felix Hannibal (Mittwoch, 22 Mai 2013 11:18)

      Hab es hinbekommen. Vielen Dank nochmal!

    • #7

      Felix Hannibal (Mittwoch, 22 Mai 2013 11:15)

      Ist es möglich die Größe der Box zu ändern ohne, dass die der transparente schwarze Balken falsch angezeigt wird?

    • #6

      Felix Hannibal (Mittwoch, 22 Mai 2013 11:04)

      Wirklich top! Vielen Dank für die Mühe!

    • #5

      Uhren-webstore.de (Dienstag, 21 Mai 2013 13:01)

      Wunderbar! Danke

    • #4

      Deine Slideshow (Dienstag, 21 Mai 2013 12:03)

      Hallo, ändere die Werte für die Transparenz an folgender Stelle (weiter unten im Head-Code) ab:

      opacity: .6;
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE8 */
      filter: alpha(opacity=60); } /*IE7 und kleiner*/

      Ändere nur die "Zahlenwerte" (6, 60, 60) und Du erhälst bei höheren Werten, weniger Transparenz.

      Viele Grüße.

    • #3

      Uhren-webstore.de (Montag, 20 Mai 2013 22:39)

      Sie lassen uns mit Ihrem Arbeitstempo keine Luft zum Atmen, bravo und ein großes Dankeschön!

      PS: Wo kann die Ausgangstransperenz der Frames etwas verändert werde, sodass die Frames nicht ganz so "milchig" sind?

      Vielen Dank

    • #2

      Deine Slideshow (Freitag, 17 Mai 2013 10:15)

      Du fügst einfach als neues Element ein Spaltenmodul hinzu. Dann kannst Du auch mehrere Vorschauboxen nebeneinander setzen.

      Viele Grüße.

    • #1

      eszett-bvs (Donnerstag, 16 Mai 2013 18:46)

      Erst einmal vielen dank für diesen tollen Frame.... meine einzigste Frage: Wie kriege ich die dinger nebeneinander?