MouseOver genişletme efekti

Question

Lütfen aşağıdaki web sitesini (www.capitec.co.za) ziyaret edin ve ana sayfanızdaki öğeler üzerinde farenizle gezdirin. Genişlediklerini fark edeceksiniz, bunu css kullanarak başarısız olduğum için web sitemde nasıl yapabileceğimi bilmek isterim. Bu jquery, javascript mi ​​ve bunu yaratmak için adobe kullandı mı? Mümkünse örneklerle yardımcı olun. Teşekkürler. Eğer bu bir css

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

farenin üzerinde genişletmek istiyorum bir div .element farz

Answer 1

tek çözüm ve css altında olan ölçek

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

başlangıç ​​değerleri faydalı olacaktır scale(1,1), div ölçeğin artış değerlerine göre genişleyecektir.

Answer 2

vurgulu üzerindeki etkisini genişletmek için transform: scale CSS kullanma İstediğiniz eleman

Answer 3

genişletmek için desteklemeniz gereken hangi tarayıcıların bağlı olarak, transform:scale() css işlevini kullanabilir ve a :hover bu çağırmak . Aşağıdaki şekilde yavaşça ölçeğe geçiş css ekleyebilirsiniz:

<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); 
}