InternInhaltsverzeichnisGlossarBausteineLinklisteTutorialsKommentare

Thema: Bilder Zoom-Funktion mit CSS Artikel anzeigen

Gerd Zühlke ✶✶✶✶✶ schrieb am Donnerstag, den 10 Januar 2019 #1
Eine sehr gute Zusammenstellung - Danke schon einmal. Mich würde interessieren, ob man nicht nur das ganze Bild Zoomen kann sondern auch einen bestimmten, durch "Koordinaten" festgelgeten Teil in die Bildmitte hinein zoomen kann.
Beispiel: ich habe außermittig im oberen linken Bildviertel etwas und will es zoomen, so daß es in einem bestimmten Zoomfaktor in der Bildmitte erscheint.
Werner schrieb am Donnerstag, den 10 Januar 2019 #2
Ohne JavaScript geht da nichts. Ich habe ein einfaches Beispiel hinzugefügt.
Hier, das ist doch genau das gesuchte? mediengestalter-bildbea[…]t=bildlupe

Nachtrag: 23.08.2019
w3schools.com/howto/how[…]e_zoom.asp
Gerd Zühlke schrieb am Donnerstag, den 10 Januar 2019 #3
Danke für das Beispiel, aber ich hatte es etwas anders gemeint gpunktzuehlke.net/2019/graf[…]ttzoom.jpg
und versucht es ein wenig bildlich darzustellen.
Ich habe ein Bild (die gesamte weiße Fläche) einen bestimmten Ausschnitt (das rote Rechteck) möchte ich beim überfahren mit der Maus herauszoomen, so daß der Ausschnitt wie das grüne Rechteck vergrößert wird. Ob das bildmittig ist oder der gezoomte Ausschnitt oben und links am Rand anstößt ist egal, Hauptsache der Ausschnitt wird vergrößert.
Es elt nicht. Danke schon einmal im Voraus.
Andy schrieb am Donnerstag, den 13 Februar 2020 #4
Hallo, danke für die Info - funktioniert super. Jetzt habe ich nur ein Problem: das Bild sollte beim Zoomen nach rechts verschoben werden. Wie funktioniert dies ?
Habe schon einwenig rumprobiert, aber leider ohne brauchbares Ergebnis (
Vielen Dank !
Marcus schrieb am Dienstag, den 19 Januar 2021 #5
Hallo =)

Vielen Dank für die Hilfestellungen! Ich habe eine kleine Herausforderung ;)

Ich habe eine 2 Spalten Website und möchte die Hover Funktion in Spalte 1 verwenden. In der kleineren, angereihten Spalte sind Links und weiterführende Informationen. Wenn ich nun das Hovern wie oben beschrieben verwende, zoomt er es zwar ein / aus, schiebt es aber unter die rechte Spalte. Gibt es eine Möglichkeit, die rechte Spalte während des Mouseover zu unterdrücken bzw. zu überdecken mit dem Zoom des Bildes? ;) Derzeit gestaltet es sich so, dass er das Bild einfach dazwischen packt und es einfach sehr unschön aussieht :-/
Werner schrieb am Dienstag, den 19 Januar 2021 #6
Was ist, wenn die Breite der Spalten festgelegt wird (.spalte {width: 350px}).
Wenn die Website responsive dargestellt werden soll, dann können dazu Media-Querys verwendet werden.

Beispiel:
@media screen and (max-width: 37rem) {
.spalte {width: 150px}
}
Peter schrieb am Dienstag, den 19 Januar 2021 #7
@Marcus;

In diesem ganz simplen Beispiel wird das Bild korrekt größer und kleiner gezoomt, ohne dass sich ein Div-Container verschiebt.
Vielleicht hilfts dir.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<!DOCTYPE html>
<html lang="de-at">
<head>
<meta charset="UTF-8">
<title>Beispiel</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
.container
{
    display:block;
    width:90%;
    margin:25px auto;
}

.spalte 
{
    displa:block;
    background:#eee;
    float:left;
    width:56%;
    padding:2%;
}

.spalte:nth-of-type(2) 
{
    display:block;
    background:#c0c0c0;
    float:left;
    width:36%;
    padding:2%;
}

.spalte:after 
{
    content: "";
    display: table;
    clear: both;
}

img.zoom 
{
    transition: transform 0.8s;
}

img.zoom:hover 
{
    transform: scale(2.0, 2.0);
}

@media screen and (max-width:768px)
{
    .spalte,.spalte:nth-of-type(2) 
    {
        float:none;width:80%;margin:0 auto;
    }
}
</style>
</head>
<body>
<div class="container">
  <div class="spalte hellgrau">
    <img src="bild.png" class="zoom">
  </div>  
  <div class="spalte grau">
     <p>Text...</p>
     <p>Text...</p>
     <p>Text...</p>
  </div>
</div>
</body>
</html>
Walter ✶✶✶✶✶ schrieb am Donnerstag, den 11 Februar 2021 #8
Sehr gut! Funktioniert so, wie ich es mir vorgestellt habe.
Danke🙂🙂🙂🙂
Finnley ✶✶✶✶✶ schrieb am Montag, den 27 Dezember 2021 #9
Hallo Werner Zenk,

ich hätte eine kurze Frage zum Zoomen von Bildern. Ich möchte gerne die Vergrößerung eines Bildes nutzen, jedoch soll sich dabei das Bild nicht mitvergrößern.
Es soll herangezoomt werden, dabei aber seine ursprünglichen Maße beibehalten. Wenn man mit der Maus über das Bild geht (hover) soll sich das Bild heranzoomen.
Wie kann ich das mit CSS bewirken? Über Hilfe würde ich mich sehr freuen!

LG Finnley😀
Werner schrieb am Montag, den 27 Dezember 2021 #10
Hallo Finnley,

ich habe nur die Bilder Zoom-Funktion mit JavaScript im Angebot:
» werner-zenk.de/javascript/bilder_zoom-funktion.php