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

Acht gängige SQL-Verwendungsbeispiele in MySQL

Vorwort MySQL setzte auch 2016 seinen starken Wac...

Detaillierte Schritte zur Installation von Anaconda unter Linux (Ubuntu 18.04)

Anaconda ist die beliebteste Python-Plattform für...

Zusammenfassung der englischen Namen chinesischer Schriftarten

Wenn Sie in CSS die Eigenschaft „font-family“ ver...

jQuery-Plugin zum Erreichen einer Bildunterbrechung

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

Fassen Sie einige häufige Rankingprobleme in MySQL zusammen

Vorwort: In manchen Anwendungsszenarien stoßen wi...

Kodierungsprobleme und -lösungen, wenn MySQL zwei Tabellen verknüpft

Wenn Mysql zwei Tabellen verknüpft, wird eine Feh...

So füllen Sie Elemente in Spalten im CSS-Rasterlayout

Angenommen, wir haben n Elemente und müssen diese...

Eine kurze Diskussion über zwei Strombegrenzungsmethoden in Nginx

Die Belastung wird im Allgemeinen während des Sys...

Warum wirkt sich die Verwendung von Limits in MySQL auf die Leistung aus?

Lassen Sie mich zunächst die MySQL-Version erklär...

Detaillierte Erklärung von mktemp, einem grundlegenden Linux-Befehl

mktemp Erstellen Sie auf sichere Weise temporäre ...

Detaillierte Erklärung der grundlegenden Interaktion von Javascript

Inhaltsverzeichnis 1. So erhalten Sie Elemente Ho...