Natürlich gibt es viele Möglichkeiten, Bilder zu vergrößern. Dabei kommt vor allem der Einsatz von Skripten und Plugins zum Einsatz. Meiner Meinung nach sind solche Methoden bei Ressourcen mit einer großen Anzahl von Fotos oder Bildern gerechtfertigt. Mein Blog ist nicht so. Und wie immer verfolge ich auf meiner Website den Weg des geringsten Zeit-, Wissens- und Ressourcenaufwands. Ich biete Ihnen eine Möglichkeit zur Steigerung...

Sie könnten auch interessiert sein an:

Wir entfernen von Homepage und RSS-Einträge der Kategorie

Wir verbessern weiterhin die Funktionalität und Aussehen Website. Wir entfernen unnötige Beiträge von der Hauptseite und RSS.

Semmelbrösel auf der WordPress-Website

Breadcrumbs auf der Website – was sind das und wie macht man sie?

So erstellen Sie in 5 Minuten einen Textschatten

Hallo, lieber Leser meines Blogs. In diesem Artikel erfahren Sie, wie Sie in 5 Minuten mit CSS-Stilen und erstellen HTML-Code Textschatten.

So erstellen Sie einen Download-Button mit CSS-Code

Hallo, lieber Leser meines Blogs. Ich setze das Thema Knöpfe fort. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS-Code einen Download-Button erstellen.

So erstellen Sie Schaltflächen für eine Website

Hallo liebe Leser. Ich dachte und dachte nach und beschloss, einen Artikel darüber zu schreiben, wie man Fotos schön vergrößert, wenn man mit der Maus darüber fährt.

Meine Freude kannte keine Grenzen, und nicht weil interessante Funktion, und nicht, weil die Kindheit an einem Ort spielt :) Ich möchte sagen, dass ich mit einem solchen Effekt nicht gerechnet habe.

Ich bin ein neuer Blogger, jung, Anfänger. Office-Programme Ich wusste praktisch nicht, wie man es benutzt, geschweige denn Photoshop. Ich habe einen Blog erstellt, aber es stellte sich heraus, dass ich von Grund auf lernen musste. Eine Teekanne mit einer Teekanne. Ich wusste nur, wie man einen Screenshot in Paint macht.

Ich wage zu behaupten, dass es unmöglich war, meine Screenshots ohne Tränen anzuschauen. Aber als ich experimentierte und das Gadget zum Blog hinzufügte, begannen meine Fotos unerwartet zu funkeln, zu leuchten, in leuchtenden Farben zu funkeln, sie schienen zum Leben zu erwachen und ein neues Leben zu beginnen, ihnen wurde ein Kontrast hinzugefügt.

Alle Bilder im Blog haben einen sanften Vergrößerungseffekt. Bilder werden nicht so vergrößert, dass sie den gesamten Bildschirm ausfüllen, sondern sie gleiten sanft heraus und erwachen zum Leben. Echter 3D-Effekt.

So installieren Sie das Gadget „Smooth Image Zoom on Hover“ in Blogger

Der Code wird überall wie ein normales HTML/JavaScript-Gadget installiert. Sie können den Artikel „“ auf meinem Blog lesen.

Jetzt besteht Bedarf an einer schönen Vergrößerung der Bilder beim Schweben. Und kein JS! Benutzer älterer Browser sehen jedoch nichts. Geschieht ihnen recht.

Ich habe im Internet nichts Vollständiges gefunden, oder es wird die Position „absolut“ verwendet, oder der Inhalt verschiebt sich und weicht dem Bild, was nicht immer akzeptabel ist.

Also fangen wir an. Sie müssen lediglich die Klasse des Bildes festlegen. Wir werden wie immer separat für links, separat für rechts und separat für die Mitte einstellen. Dies liegt an der Besonderheit der Bildvergrößerung. Denn wenn sich das Bild links befindet, sollte es beim Vergrößern nach rechts verschoben werden, sonst schwebt das Bild auf kleinen Monitoren außerhalb des Browsers.

HTML-Code für das links angezeigte Bild (das Bild wird vergrößert, bewegen Sie die Maus auf das Bild):

Und ein wenig CSS, in dem wir die Größe des Miniaturbilds, die Position (links), den Umbruch und auch die Vergrößerung des Bildes beim Bewegen des Mauszeigers angeben:

img .img.left ( float: left ; margin: 5px 15px 5px 0 ; max-height: 320px ; max-width: 320px ; ) img .img.left :hover( transform: Scale (2 ) Translate (70px , 30px ) ; Übergang: alle 0 .

Und das CSS unterscheidet sich nur in der Position des Miniaturbilds (nach rechts) und der Verschiebung nach links beim Vergrößern:

img .img.right ( float: right ; margin: 5px 0 5px 15px ; max-height: 320px ; max-width: 320px ; ) img .img.right :hover( transform: Scale (2 ) Translate (-69px , 30px ); Übergang: alle 0 .

Lassen Sie uns nun eine Miniaturansicht für die Mitte anzeigen:

img .img.center ( margin: 5px auto ; display: block ; max-height: 320px ; max-width: 320px ; ) img .img.center :hover ( transform: Scale (2 ); Transition: all 0 . 3s linear 0,3s ;

Fassen wir das CSS zusammen und fügen Schönheit hinzu:

img .img.left ( float: left ; margin: 5px 15px 5px 0 ; ) img .img.right ( float: right ; margin: 5px 0 5px 15px ; ) img .img.center ( margin: 5px auto ; display: block ; ) img .img ( max-height: 320px ; max-width: 320px ; Übergang: alle 0 , 3s linear 0s ; z-index: 1 ; Rand: 1px solide #EEE ; Hintergrund: #FFFFFF ; Auffüllung: 5px ; ) img .img :hover ( Cursor: Zeiger ; Boxschatten: 0 0 5px 5px #eee ; Rand: 1px fest #25A0E3 ; Z-Index: 10 ; Übergang: alle 0 , 3s linear 0 , 3s ; ) img .img. left :hover( transform: Scale (2 ) Translate (88px , 30px ); ) img .img.right :hover( transform: Scale (2 ) Translate (-88px , 30px ); ) img .img.center :hover ( transform :scale(2);

Ich habe den Bildzoom um 0,3 Sekunden verzögert. Damit sich das Bild nicht vergrößert, wenn Sie mit der Maus über das Bild fahren.

Es gibt viele Möglichkeiten, ein Bild auf einer Website zu vergrößern. Wir werden uns verschiedene Möglichkeiten ansehen, Bilder zu vergrößern, ohne zusätzliche Skripte zu verwenden, sondern einfach HTML und CSS zu verwenden.

Solche Methoden ermöglichen es Ihnen, das Original schnell anzuzeigen, da kein zusätzliches Laden von Skripten erforderlich ist. Wenn Sie jedoch Originalbilder mithilfe von Skripten mit schönen Effekten öffnen oder eine Galerie erstellen möchten, empfehle ich Ihnen, die folgenden Artikel zu beachten:

Ich habe einen lyrischen Exkurs gemacht, fangen wir an.

Vergrößern des Bildes auf der Website

Der Vorteil besteht darin, dass Sie für das Originalbild kein separates Miniaturbild erstellen müssen. Hier handelt es sich nur um ein Bild

Vergrößert das Bild auf der Website, wenn Sie mit dem Cursor darüber fahren

Der erste und einfachste Weg Vergrößern Sie das Bild auf der Website besteht darin, der Bildeigenschaft zwischen den img-Tags den folgenden Code hinzuzufügen:

onmouseover="this.style.width="Breite des Originalbildes in px (oder auto)"" onmouseout="this.style.width="Breite des verkleinerten Bildes in px""

Das heißt, wenn Sie den Cursor einmal bewegen, wird das Bild größer.

Vollständiger Code:

Und die letzte Möglichkeit ist die schönste Möglichkeit, den Schwebeflug mit zu vergrößern. Hier fügen wir dem großen Bild einen Rahmen und eine Beschreibung hinzu.
Code:

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

Beschreibung des Bildes.

Beschreibung des Bildes.

Bild auf der Website durch Anklicken vergrößern

Die Methode „Zum Vergrößern anklicken“ ähnelt der allerersten „Hover-to-Zoom“-Methode, aber anstelle von „onmouseover“ verwenden wir „onclick“.

Ergebnis:

Wie Sie hier sehen können, müssen Sie zum Vergrößern des Bildes darauf klicken. Wenn Sie den Cursor entfernen, wird es automatisch verkleinert.

In der nächsten Version Vergrößern Sie das Bild auf der Website Beim Klicken verwenden wir:

Um das Bild zu verkleinern, also auf die Originalgröße zurückzusetzen, müssen Sie hier auf eine beliebige Stelle auf der Webseite klicken.

Ergebnis:

Eine weitere Möglichkeit besteht darin, das Bild zu vergrößern, indem Sie auf den Text klicken. Hier verwenden wir den folgenden Code:

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

Wir haben uns mehrere Optionen angesehen Vergrößern Sie das Bild auf der Website: vom einfachsten bis zum etwas komplexeren mit mit HTML Und . Verwenden Sie sie ohne zusätzliche Skripte auf Ihren Websites.