Mouseover Bilder Zoom mit HTML CSS Hover?

Hallo.

Ich möchte gerne wenn man auf das Bild geht mit der Maus, dass automatisch reingezoomt wird. Wie das geht und skaliert wird weiß ich. Da sich das Bild aber enorm vergrößern soll nimmt es die ganze Seite ein. Nun möchte ich, dass diese enorme Vergrößerung innerhalb eines Rahmens stattfindet, den ich definiere.

Ich probiere schon ein div drum herum zu legen und dies zu definieren, aber es klappt nicht. Hat schon mal jemand sowas gemacht und Beispielcode?

Anja

23.12.2022, 12:13

Anbei die Seite, damit ihr mein Problem versteht:

http://www.sammel-kiste.de/webshop/rasterfolien/Raster/raster.htm

2 Antworten

elmex7

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Webseite

23.12.2022, 17:37

Da CSS beitet overflow dafür

NoctusRex

23.12.2022, 12:29

Evtl. hilft dir das weiter:

https://www.w3schools.com/howto/howto_css_zoom_hover.asp

Woher ich das weiß:Studium / Ausbildung – Ausbildung

Mats4411

23.12.2022, 12:55

Ich vermute mal, du suchst soetwas:

https://www.revilodesign.de/blog/css-tricks/bilder-zoom-effekt-beim-hover/#:~:text=So%20funktioniert%20der%20Bilder%20Zoom%20Effekt&text=css%20Datei.,dabei%20nach%20belieben%20ge%C3%A4ndert%20werden.

Bierprinzessin

Fragesteller

23.12.2022, 13:37

leider nicht. das ist der Zoom. das ist okay.

aber der zoom soll sich nur in einem definierten kästchen befinden. nicht die ganze website einnehmen.

ich habe halt bilder in die muss ganz weit reingezoom werde bzw. gehovert...aber die dürfen dabei nicht die ganze seite ausfüllen. kann man sagen dass dass ganze nur in einem kästen beipielsweise 100x300px passiert?

am besten du gehst mal auf die seite, dann siehst du es.

Ähnliche Fragen

CSS height and max gleichzeitig?

Hallo,

Ich habe einem Div-Element gesagt, dass es eine Breite von 40% und eine Höhe von 100% haben soll, aber der nutzt jetzt irgendwie nur die Breite, und nicht die höhe. Woran kann das liegen?

...zur Frage

Gehört Hardware zum Backend?

Also Server, Netzwerke ect. Oder ist damit nur die Entwicklung von Software gemeint?

...zur Frage

CSS für <p> </p> eine Scrollbar?

Ich habe ein <p> Tag wo am ende meines Scripts durch die ID ein sehr großer Inhalt rein kommt und dafür bräuchte ich jetzt eine Scroll leiste. Aber wie mache ich das?

...zur Frage

Wie in einer HTML Website Text neben ein Bild machen?

Hi, ich programmiere gerade für eine Präsentation in der Schule eine Mini Website. Ich mach mal ein Bild vom Code des Bildes und von der ausgeführten Seite.

Ich will, dass das Bild rechts ist und links der Text, ohne das genau neben dem Bild Platz ist.

...zur Frage

Navigationsleiste auf andere html?

Hallo, ich bin ziemlich neu was Websides programmieren angeht und ich finde kein gutes tutorial dazu, wie man wenn man eine Navigationsleiste hat z.b auf Getränke klickt und dann eine andere html/css Seite mit Getränken auftaucht etc.

versuche da auxh bisschen JavaScript mit rein zubringen d.h Benutze die Navigationsleiste von Material Design Lite.

Bin da bisschen überfragt und habe keine ahnung😅

<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>

...zur Frage

An die Webdesigner?

Wie viele Kunden habt ihr ungefähr, dessen Webseiten ihr verwaltet bzw. hostet und wie viel kostet es monatlich bei euch?

...zur Frage

Nächste Schritte für Full Stack dev?

Hallo,

Ich bin auf der Suche nach einem genauen Weg oder Schritte die ich gehen kann nachdem ich mein ersten Full Stack Projekt mit Python Flask ( Backend) und Frontend ( plain HTML, CSS und JS) und Database mit MySQL fertig gecodet habe.

Was genau kann ich jetzt machen um weiter zu kommen. Mein Ziel ist es fähig zu sein komplette professionelle Websiten erstellen zu können die Industrie fähig sind, d.h. Für Firmen, restaurants etc. Oder halt einen job als Full Stack dev zu bekommen.

sollte ich anfangen ein CSS framework lernen, wie bootstrap oder tailwind, oder ist das nur für designer , pur Frontend devs wichtig.
Oder lieber Backend frameworks wie Node.js, oder frontend JS frameworks wir zb react.

Ich weiß einfach nicht genau wo ich weiter machen soll nachdem ich alle Grundlagen berherrsche.

...zur Frage

Politik Halbkreis selber erstellen? Welche(s) Programm(iersprache)?

Ich bin sehr Politik interessiert und vor allem Sitzverteilungen und Koalitionen interessieren mich.

Ich versuche seit Ewigkeiten immer wieder so einen Halbkreis zu machen - siehe Bild (hier Österreich als Bsp.)

Habe es schon mit HTML und CSS probiert, bin aber an der Form gescheitert und um das alles (Code und Webseite) zu verbinden.

Weiß da jemand mehr bzw. kann mir jemand helfen und mich glücklich machen?

egal ob YT Video, oder sonst was.

Danke schonmal im Voraus

...zur Frage

Wie ranke ich mein Blog?

Hey, ich habe ein Blog programmiert mit Javascript, HTML, Css bin nun so gut wie fertige schreibe derzeit meine blog Artikel will zum start 10-20 haben, aber wenn die Seite online ist, ist die frage die ich mir stelle wie ranke ich die Beiträge? Hab auf Youtube nix dazu gefunden.

...zur Frage

JavaScript vs. Flutter und Dart?

Was findet ihr besser?

HTML, CSS und Javascript

Oder

Dart und Flutter

...zur Frage

Wie kann ich bei dieser Website den Link nach oben rechts verschieben?

Ich habe einen Link erstellt, der mich wieder zurück zur Hauptwebsite bringt. Nur möchte ich, dass der Link oben rechts ist. Kann mir da jemand helfen?

Die Webseite:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preise</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
      padding-left: 100px;
      padding-right: 100px;
    }

    .preise-navbar {
      padding-left: 100px;
      color: rgb(52, 57, 56);
    }

    .preise-container {
      background-color: white;
      padding: 16px;
    }

    table {
      border-collapse: collapse;
    }

    td,
    th {
      padding: 16px;
      border-bottom: 2px solid #8ebf42;
      text-align: center;
      padding-left: 100px;
    }

    a {
    }
  </style>
</head>
<body>
  <div class="preise-container">
    <h1 class="preise-navbar">Preise:</h1>
  </div>
  <table>
    <tr>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td>Erwachsene:</td>
      <td>20€</td>
    </tr>
    <tr>
      <td>Kinder unter 18</td>
      <td>10€</td>
    </tr>
    <td>Kinder unter 6</td>
    <td>3€</td>
  </table>
  <a href="Index.html">Zurück</a>
</body>
</html>

...zur Frage

Abstand zwischen zwei Div-Containern verhindern HTML?

Ich habe zwei Div-Container mit display: inline-block; padding: 0; margin: 0; aber es befindet sich trotzdem ein Abstand zwischen ihnen. Woran liegt das?

hoffe auf Hilfe,

Bohne47

...zur Frage

3D Datei Upload auf Website mit automatischer Preisberechnung?

Hallo, ich biete schon seit längerem einen 3D- Druck Service auf Ebay-Kleinanzeigen an, welcher sehr gut läuft. Daher möchte ich jetzt eine Website erstellen, bei der meine Kunden die Datei hochladen können und dann direkt ein Angebot erhalten. Ich habe bei mehreren verschiedenen Anbietern gesehen das, deren Upload gleich aussieht. Daher ist mir in den Kopf gekommen, dass vielleicht irgendein Tool etc. welches ich auf meiner Website einfügen kann. Leider habe ich dazu nichts gefunden. Daher wollte ich fragen, ob jemand so ein Tool kennt. Am besten wäre aber eine Shopify App.

Ich würde mich über jede Hilfe freuen!

...zur Frage

Timer auf Webseite (HTML)?

Wie kann ich in JTML einen Versteckten Tiger stellen, so dass einige Texte erst nach Ablauf des Timers (z.B. 10 sek.) Auftauchen. Der endbenutzer soll davon nichts sehen!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen