Lupensymbol über allen Bildern vor dem hovern

    Hallo Forum,

    ich bin erstens hier ganz neu und zweitens blutiger CSS-Anfänger. Ich vermute, dass mein Problem für viele von euch eine Kleinigkeit ist. Daher dachte ich mir: Frag mal nach, bevor du Stunden frustrierender Versuche investierst... :roll:

    Ziel:
    Ich möchte alle Bilder meiner Homepage durch Auflegen des Mauszeigers vergrößern lassen. Das ist schonmal erfolgreich gelungen. Damit der Nutzer auf diese Möglichkeit aufmerksam wird, möchte ich zudem ein kleines jpg-Symbol einer Lupe (mit statischer Größe, unabhängig von den unterschiedlich großen Bildern daraunter) unten rechts am Bildrand jeden Bildes einblenden. Beim hovern soll es natürlich verschwinden.

    Ich habe im CSS bisher folgenden Code:

    [INDENT]figure {
    width: 280px;
    padding: 4px;
    margin-left:20px;
    overflow: hidden;
    float: right;
    border: 1px solid #acd7fb;
    border-radius: 5px;
    background-color: #f6f6f6;
    -webkit-transition: all 0.25s ease-in; /* für Safari 5.1, Android 2.3 bis 4.3 */
    transition: all 0.25s ease-in;
    }


    figure:hover {
    -webkit-transform: scale(2); /* für Safari, Android */
    -ms-transform: scale(2); /* für IE9 */
    transform: scale(2);
    -webkit-transform-origin: right center; /* für Safari, Android */
    -ms-transform-origin: right center; /* für IE9 */
    transform-origin: right center;
    }


    figure img {
    width: 100%;
    border-radius: 3px 3px 0 0;
    }


    figure figcaption {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    padding: 2px 2px 2px 2px;
    background-color: #f6f6f6;
    border-radius: 0 0 3px 3px;
    }[/INDENT]

    Die Sache mit der Lupe fehlt da noch völlig. Ich vermute, ich brauche dazu die Funktionen before, content, z-index und opacity, oder?

    Wie gesagt, der obige Code ist mühsam gebastelt, denn ich weiß nicht wirklich, was ich da tue. :?
    Daher wäre es supernett, wenn mir jemand das für Blöde erklärt – oder mit einfach die Script-Schnipsel zur Verfügung stellt.

    Herzliche Grüße aus Wuppertal
    birkenfrank

    Dank dir! Ich habe das umgesetzt – obwohl es nicht das ist, was ich suche. Ich möchte eine statische Lupe über den Bildern sehen, die beim überfahren mit der Maus verschwindet.

    Gruß
    birkenfrank

    Das stimmt... das ist eine ganz andere Baustelle. Habe ich deine Frage nicht richtig gelesen und/oder falsch verstanden :(.
    Kann das jetzt so schnell nicht testen, aber von der Idee her sollte es so funktionieren.
    Dein Lupenbild schreibst du zusammen mit dem richtigen Bild in das figure-Element. In der Reihenfolge <img Lupe><img Bild>
    Das Lupenbild musst du dann mit 'position: absolute;' aus den Textfluss herausnehmen und, wenn erforderlich, mit 'z-index: 99;' in den Vordergrund holen.
    Bei hover über das figure-Element musst du dann für das Lupenbild auf 'display: none;' setzen.

    if(!sleep)

    {$sheep++;}

    Hört sich gut an :-D, ist aber für mich CSS-Embryo in der beschriebenen Form leider zu hoch :-(.

    Ich weiß nicht, was ins CSS und was ins html muss und ich bin überfordert, wie die Dinge, die du beschrieben hast, genau eingefügt werden. Wie gesagt, ich beschäftige mich erst seit einer Woche überhaupt mit CSS und html5 und habe die umgesetzten Dinge nicht selbst geschrieben, sondern abgekupfert. Keine Ahnung, wann ein # oder ein . wichtig sind? Keine Ahnung, wie die position genau angegeben wird usw.?

    Sorry, aber so ist das nunmal. Ich bin da auch nicht wirklich der engagierte Bastler – die Inhalte der Homepage sind mir weitaus wichtiger. Wäre halt ein nettes „nice-to-have“. :roll:

    Oh je... dann wird das nicht so einfach.
    Es ist vielleicht nur die zweitbeste Idee, sich HTML und CSS auf diese Weise beizubringen... abkupfern ohne zu verstehen. Besser könnte es sein, wirklich mit den Grundlagen anzufangen.
    Wenn dein Englisch einigermaßen ist solltest du mal das hier durchackern:
    https://www.w3schools.com/html/default.asp
    oder das hier in deutsch:
    https://wiki.selfhtml.org/wiki/HTML/Tuto…nstieg/Kapitel1

    Ansonsten gilt immer, was du auf deiner siehst... Texte, Bilder, Links, Tabellen, Listen und und und... fügt man in den HTML Teil - also zwischen den <body> </body> Tags ein.
    Wie das so eingefügte dann aussieht... Layout, Farbe, Größe, Position und und und... macht an dann mit CSS im <head> </head> Bereich in der <style>-Anweisung. Oder besser mit einem externen Stylesheet!

    if(!sleep)

    {$sheep++;}

    Nun gut, das ist mir so im Groben schon klar. Es ist manchmal schwierig, so etwas verständlich rüberzubringen, sorry :oops:

    Also konkret (wenn du noch Lust hast):

    • <img Lupe><img Bild> auf der html-Seite hintereinanderweg? Mit zwei src?
    • 'position: absolute;' vermutlich im CSS bei figure? Einfach unten dran z.B. unter cursor: -moz-zoom-in;?
    • Oder brauche ich ein zweites figure-Element für die Lupe? Könnte man da nicht im CSS die Lupe als content: img-src=lupe.png mit reinschreiben?
    • Du schreibst: „Bei hover über das figure-Element musst du dann für das Lupenbild auf 'display: none;' setzen.“ Das hört sich für mich tatsächlich so an, als ob es ein extra figure-Element für die Lupe gäbe?
    • Wohin kommt das 'z-index: 99;'?

    Du siehst, das meinte ich mit „CSS-Embryo“ :lol:

    Ok - Eins nach dem Anderen.
    Wenn ich dein CSS aus dem ersten Beitrag richtig deute, dann hast du in deinem HTML Teil irgendwas stehen, das so aussieht:

    HTML
    <figure>
   <img src="dein_Bild.jpg" alt="ein Bild">
</figure>


    das solltest du wie folgt abändern/ ergänzen:

    HTML
    <figure>
   <img class="lupe" src="dein_Lupe.jpg" alt="ein Lupe">
   <img class="mein_bild"  src="dein_Bild.jpg" alt="ein Bild">
</figure>


    Den Bildern habe ich jeweils eine Klasse (class) zugewiesen, damit man sie mit CSS einzeln ansprechen kann.
    Die Klasse hier im class=" " wird nur der Klassenname angegeben. Um diese Klasse im CSS anzusprechen muss ein Punkt (.) davor stehen! Also im CSS '.lupe' und '.mein_bild'.

    Dann musst du, bei der jetzt schon in deinem CSS vorhanden Anweisung natürlich die Klasse noch ergänzen... so:

    HTML
    figure img.mein_bild {
  width: 100%;
  border-radius: 3px 3px 0 0;
}

    und gleich dahinter dann die Formatierung für die Lupe:

    HTML
    figure img.lupe {
   position: absoute;
   width: 30px;     /* Breite nach Bedarf ändern */ 
   height: 30px;   /* Höhe nach Bedarf ändern */ 
   border: 1px solid #000;  /* Bei  Bedarf ändern */
   z-index: 99;
}


    Zu Schluss musst du die Lupe noch ausblenden, wenn du mit der Maus über das figure-Element 'hoverst':

    HTML
    figure:hover img.lupe {
   display: none;
}

    Sollten Probleme auftauchen oder irgendwas nicht so funktionieren wie gedacht, wieder hier melden.

    if(!sleep)

    {$sheep++;}