Mit CSS3 erstellter Hover-Zoom-Effekt

Mit CSS3 erstellter Hover-Zoom-Effekt

Ergebnis:

Implementierungscode:

html

<link href='https://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700' rel='stylesheet' type='text/css'>

<div align="center" Klasse="Fond">
<div Stil="Breite:1000px;">

<div Klasse = "style_prevu_kit" Stil = "Hintergrundfarbe:#cb2025;"></div>
<div Klasse = "style_prevu_kit" Stil = "Hintergrundfarbe:#f8b334;"></div>
<div Klasse = "style_prevu_kit" Stil = "Hintergrundfarbe: #97bf0d;"></div>
<div Klasse = "style_prevu_kit" Stil = "Hintergrundfarbe: #00a096;"></div>
<div Klasse = "style_prevu_kit" Stil = "Hintergrundfarbe: #93a6a8;"></div>


<div style="Auffüllung: 5px; Farbe: #b5e6e3; Schriftstärke: 300; Schriftgröße: 30px; Schriftfamilie: 'Roboto';Auffüllung oben: 20px;">jb <font style="Schriftstärke: 400;">51</font></div>
        <a href="http://www.wifeo.com/code" style="text-decoration:none;" target="_blank"><div style=" Farbe:#b5e6e3; Schriftstärke:300; Schriftgröße:20px; Schriftfamilie:'Roboto';">123WORDPRESS.COM</div></a>
  
</div>
</div>

CSS3

.fond{position:absolute;padding-top:85px;oben:0;links:0; rechts:0;unten:0;
 Hintergrundfarbe: #00506b;}

.style_prevu_kit
{
    Anzeige: Inline-Block;
    Rand: 0;
    Breite: 196px;
    Höhe: 210px;
    Position: relativ;
    -webkit-transition: alle 200 ms Einarbeitung;
    -webkit-transform: Skalierung(1); 
    -ms-Übergang: alle 200 ms Einarbeitung;
    -ms-transform:Skala(1); 
    -moz-transition: alle 200 ms Einarbeitung;
    -moz-transform: Skalierung(1);
    Übergang: alle 200 ms Einschwingzeit;
    transformieren: Skalierung(1);   

}
.style_prevu_kit:hover
{
    Kastenschatten: 0px 0px 150px #000000;
    Z-Index: 2;
    -webkit-transition: alle 200 ms Einarbeitung;
    -webkit-transform: Maßstab(1,5);
    -ms-Übergang: alle 200 ms Einschwingvorgang;
    -ms-transform:Skala(1,5);   
    -moz-transition: alle 200 ms Einarbeitung;
    -moz-transform: Skala (1,5);
    Übergang: alle 200 ms Einschwingzeit;
    transformieren: Skalierung (1,5);
}

Oben sind die Details des Hover-Zoom-Effekts aufgeführt, der von CSS3 erstellt wurde. Weitere Informationen zum CSS3-Hover-Zoom finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

<<:  HTML+CSS zum Hinzufügen eines Löschkreuzes und einer Bildlöschschaltfläche in der oberen rechten Ecke des Bildes

>>:  Sieben verschiedene Farbschemata für das Website-Design-Erlebnis

Artikel empfehlen

Vue + ElementUI implementiert Paging-Funktion - MySQL-Daten

Inhaltsverzeichnis 1. Problem 2. Lösung 2.1 Pagin...

VSCode-Entwicklung UNI-APP Konfigurations-Tutorial und Plugin

Inhaltsverzeichnis Vorne geschrieben Vorsichtsmaß...

So richten Sie eine VSCode-Remoteverbindung zum Server-Docker-Container ein

Inhaltsverzeichnis Ziehen Sie das Bild Ausführen ...

Deutsch: Ein Link-Tag vervollständigt href im IE automatisch

Englisch: Ein Link-Tag vervollständigt href im IE...

Beispiel für die Anzeige von Bildjalousien mit reinem CSS

Lassen Sie mich Ihnen zunächst den fertigen Effek...

Miniprogramm zur Implementierung des kompletten Einkaufswagens

Das Miniprogramm implementiert einen vollständige...

Detaillierte Erklärung der Linux-Befehle und der Dateisuche

1. Führen Sie eine Dateinamensuche durch which (S...

Detaillierte Erläuterung des Ausführungsprozesses von MySQL-Abfrageanweisungen

Inhaltsverzeichnis 1. Kommunikationsmethode zwisc...

Beispiel zum Aktivieren des Brotli-Komprimierungsalgorithmus für Nginx

Brotli ist ein neues Datenformat, das eine um 20 ...

Vue verwendet Regeln zur Implementierung der Formularfeldvalidierung

Es gibt viele Möglichkeiten, Formularfelder in Vu...

Mysql löscht doppelte Daten, um die kleinste ID-Lösung beizubehalten

Suchen Sie online nach doppelten Daten und behalt...

Bringen Sie Ihnen kostenlos bei, wie Sie AWS-Serverressourcen nutzen

AWS – Amazons Cloud-Computing-Serviceplattform Ic...

Das WeChat-Applet realisiert die Chatroom-Funktion

In diesem Artikel wird der spezifische Code des W...

JavaScript-Grundlagen: Fehlererfassungsmechanismus

Inhaltsverzeichnis Vorwort Error-Objekt werfen ve...