MouseOver expand Wirkung

Question

Bitte besuchen Sie die folgende Website (www.capitec.co.za) und Staubsauger mit der Maus über die Elemente auf der Homepage. Sie werden bemerken, dass sie sich erweitern, ich würde gerne wissen, wie ich das auf meiner Website machen kann, da ich bei der Verwendung von CSS versagt habe. Ist es jquery, Javascript und sie benutzten Adobe, um dieses zu schaffen, bitte helfen Sie mit Beispielen wenn möglich. Vielen Dank.

Answer 1

Nimmt man ein div .element, die Sie über

auf Maus erweitern möchten

<div class="element"> 
    // you content 
</div> 

Dies ist eine CSS einzige Lösung und unter CSS wäre von Vorteil

.element:hover{ 
    transform:scale(1.1,1.1); 
} 

Die Anfangswerte der Skala sind scale(1,1) Das div wird entsprechend den steigenden Skalierungswerten erweitert.

Answer 2

Je nachdem, welchen Browser Sie unterstützen müssen, können Sie die transform:scale() CSS-Funktion verwenden und diese auf :hover eines aufrufen das Element, das Sie

Answer 3

Verwenden Sie die transform: scale CSS haben Wirkung erweitern auf schweben erweitern möchten .

<div class="expand"> Hover me to expand </div> 


.expand { 
    width: 100px; 
    height: 100px; 
    background-color: coral; 
    margin: 2em; 
    padding: 1em; 
    -webkit-transition: -webkit-transform 1s; 
    -moz-transition: -moz-transform 1s; 
    transition: transform 1s; 
} 
.expand:hover { 

    -webkit-transform: scale(1.5); 
    -moz-transform: scale(1.5); 
    transform: scale(1.5); 
}