Trapp: Bild über dem Bild vergrößern

Hallo, wenn ich in dem nachfolgenden Beispiel über das Bild fahre, wird es neben dem Ursprungsbild vergrößert. Wie kann ich erreichen, dass es sich über dem Ursprungsbild öffnet? Danke für Eure Geduld.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<style>
.bilder_zoom{
position: relative;   
z-index: 0;
}

.bilder_zoom:hover{
background-color: transparent;
z-index: 50;
}

.bilder_zoom span{
position: absolute; float: left;
visibility: hidden;
/* color: black; */
text-decoration: none;
}

.bilder_zoom span img{ 
border-width: 0;

}

.bilder_zoom:hover span{
visibility: visible;
}

  </style>
</head>
 
<body>
<div>
    <a class="bilder_zoom">
    <img style="width: 100px; height: 67px;" src="bild.jpg" alt="Blumen" />
    <span><img src="bild.jpg" width="500" height="334" alt="Blumen" /></span></a>
</div>
</body>
</html>
  1. @@Trapp

    wenn ich in dem nachfolgenden Beispiel über das Bild fahre, wird es neben dem Ursprungsbild vergrößert.

    Nein, bei mir nicht. Ich fahre über das Bild, indem ich die Tab-Taste drücke – nichts passiert.

    Merke: Wann immer du :hover im Stylesheet zu stehen hast, sollte :focus nicht weit sein.

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. Und wenn Du mit der Maus darüber fährst?

      1. @@Trapp

        Und wenn Du mit der Maus darüber fährst?

        Es gibt Nutzer, die haben keine Maus.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. Warum werden immer wieder Ratschläge erteilt, nach denen man gar nicht gefragt hat? Das Beispiel habe ich (vermutlich) aus Selfhtml) und der Einfachheit halber abgespeckt. Dass nicht alle eine Maus besitzen ist mir bekannt und auch wie dies dann abgehandelt wird. Gefragt war dies sicher nicht!

          1. @@Trapp

            Warum werden immer wieder Ratschläge erteilt, nach denen man gar nicht gefragt hat?

            Weil das die Qualität dieses Forums ausmacht.

            Das Beispiel habe ich (vermutlich) aus Selfhtml) und der Einfachheit halber abgespeckt.

            Wenn ersteres, gib das bitte an. Dann muss SELFHTML berichtigt werden.

            Wenn zweiteres, dast du nicht abgespeckt, sondern bis zur Funktionsuntüchtigkeit verstümmelt.

            Dass nicht alle eine Maus besitzen ist mir bekannt und auch wie dies dann abgehandelt wird.

            Schön, dass du das weißt. Hier lesen aber auch andere mit.

            Gefragt war dies sicher nicht!

            Dass eine Webseite auch mit anderen Eingabegeräten als Mäusen funktionieren muss, ist immer gefragt.

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. Weil das die Qualität dieses Forums ausmacht.

              Die Frage ist nur ob zum Positiven oder Negativen.

            2. @Gunnar: Und zum Thema hast Du nichts beizutragen?

              1. @@Trapp

                @Gunnar: Und zum Thema hast Du nichts beizutragen?

                Wenn ich das hätte, würde ich es tun.

                Du kannst es potentiellen Etwas-beizutragen-Habenden aber einfacher machen, indem du ein Online-Beispiel bereitstellst: entweder deine Seite verlinken oder auf Plattformen wie CodePen.

                LLAP 🖖

                --
                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                1. @Trapp: Es gibt in diesem Forum Leute, die ein verstärktes Mitteilungsbedürfnis haben und zu jedem Beitrag etwas schreiben müssen. Das gabs schon in der Schule, dass der Lehrer solche Schüler bremsen musste!

                  1. Hej Mitleser,

                    @Trapp: Es gibt in diesem Forum Leute, die ein verstärktes Mitteilungsbedürfnis haben und zu jedem Beitrag etwas schreiben müssen. Das gabs schon in der Schule, dass der Lehrer solche Schüler bremsen musste!

                    In einem öffentlichen Raum, der dazu gedacht ist, Hilfe zu guter Webentwicklung zu geben, wird Code voller Fehler präsentiert - und du möchtest ernsthaft, dass die enthaltenen Fehler ungenannt bleiben?

                    Das musstest du - ungefragt - unbedingt loswerden? Und behauptest andere hätten ein ungebremstes Mitteilungsbedürfnis? — Ich frag ja nur…

                    Marc

  2. Hallo,

    Wie kann ich erreichen, dass es sich über dem Ursprungsbild öffnet?

    Je nachdem, was genau du unter über verstehst, kann es reichen die Reihenfolge zu tauschen.

    Gruß
    Kalk

    1. Ich meinte mit 'über', dass das Originalbild verdeckt wird und die links oben liegenden Ecken der beiden Bilder an der gleichen Position liegen sollen.

      1. Hallo,

        Ich meinte mit 'über', dass das Originalbild verdeckt wird und die links oben liegenden Ecken der beiden Bilder an der gleichen Position liegen sollen.

        Wenn ich das richtig sehe, dann willst du dasselbe Bild, bloß größer. Da brauchst du doch nicht zwei Img-Elemente, sondern kannst doch direkt bei dem einen per CSS die Größe verändern. Auf das Inline-CSS kannst du auch verzichten.

        Gruß
        Kalk

        1. Jaaa, das ist schön, danke!

  3. Hallo Trapp,

    .bilder_zoom:hover{
    

    Wo immer :hover erscheint, sollte :focus nicht weit sein. (Gunnar Bittersmann)

    <div>
        <a class="bilder_zoom">
        <img style="width: 100px; height: 67px;" src="bild.jpg" alt="Blumen" />
        <span><img src="bild.jpg" width="500" height="334" alt="Blumen" /></span></a>
    </div>
    

    Wozu die Elemente div und span? Warum ein a, wenn es nicht wo anders hinführt? Die Angaben mit „px“ sind falsch.

    <figure>
      <img src="bild1.jpg" alt="Blumen">
      <img src="bild2.jpg" alt="große Blumen">
    </figure>
    

    wäre aus meiner Sicht ein geeignetes Markup. Beispiel: https://www.j-berkemeier.de/Spiralen.html

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
  4. Hallo, wenn ich in CSS als Width/height 100% angebe, wird das Bild so groß wie die gesamte Seite. Was muss ich angeben, dass das Bild genau die Originalgröße annimmt?

    1. @@Trapp

      wenn ich in CSS als Width/height 100% angebe, wird das Bild so groß wie die gesamte Seite. Was muss ich angeben, dass das Bild genau die Originalgröße annimmt?

      Gar nichts.

      Oder wenn schon was angegeben ist, musst du den Wert wieder zurücksetzen. Das geht mit den Schlüsselwörtern initial bzw. unset [CSS-CASCADE §7.3] – außer im IE.

      Du kannst aber auch explizit auf den Ausgangswert setzen. Dazu musst du dir diesen raussuchen. Für die Eigenschaften width und height ist das der Wert auto. [CSS 2.2 §10.2, §10.5]

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. @Gunnar

        mit der Angabe "auto" funktioniert es, danke dir. Aber um die Beschreibung zu verstehen, muss man wohl 14 Semester Englisch und Informatik studieren;-) Ich habe nichts aber auch gar nichts kapiert. Aber Hauptsache es funktioniert jetzt!

    2. hat sich erledigt… 😉