Mouse Hover in HTML-Funktion zu Pop oder zoomen Bild

Question

Ich bin ein Orakel-Typ und habe Schwierigkeiten, eine HTML-Funktion zu schreiben, würde ich wirklich Ihre Hilfe zu schätzen wissen. Was ich erreichen möchte, ist, dass ich ein 4 Bild oder ein Bild mit 4 Teilen habe, und einmal die Maus über jedes Teil muss herauskommen oder gezoomt werden. letztlich möchte ich einmal die Maus irgendwo schweben, um zu pop aus, FYI ich kann den Teil als Bilder gespeichert haben. Das Originalbild wird also in 4 Teile aufgeteilt. bitte den Code teilen, dies zu tun, oder wenn Sie irgendwelche Informationen haben, bitte lassen Sie mich wissen, Ihre Hilfe sehr

geschätzt

Dank im Voraus

Answer 1

Der einfachste Weg, um die Pop-Effekt zu erzielen wäre, eine CSS anwenden Die 2D-Skalierung wird transformiert, wenn Sie den Mauszeiger über das Element bewegen. Etwas in diesem Sinne:

.part { 
 
    background-color: #ddf; 
 
    padding: 30px; 
 
    margin: 10px; 
 
    border: 1px solid #333; 
 
} 
 
.part:hover { 
 
    transform: scale(1.02); 
 
}

<div class='part'>Part 1</div> 
 
<div class='part'>Part 2</div> 
 
<div class='part'>Part 3</div> 
 
<div class='part'>Part 4</div>