Temat: Zmiana rozmiaru przycisku/obrazka

Witam, mam problem ze zmianą rozmiaru np diva. W jaki sposób mogę zrobić, aby po najechaniu na niego myszą przycisk/obrazek rozszerzył się w 4 strony na raz?
Próbowałem przy pomocy opcji Animate, i właściwości height i width jednakże, wtedy przycisk rośnie mi tylko w dół i w prawo. Chciałbym natomiast, żeby "urósł" też w lewo i w górę. Jakieś wskazówki?

Temat: Zmiana rozmiaru przycisku/obrazka

Bardziej skomplikowana opcja to animowanie poza rozmiarem obrazka także jego marginesem. Chodzi o to by ustawić ujemny margines pionowy o wartości połowy wysokości różnicy między rozmiarem początkowym a końcowym i analogicznie dla szerokości i marginesu poziomego. Brzmi zagmatwanie, przykład lepiej to zilustruje: JSFiddle DEMO

Drugą opcją jest całkowite pozbycie się JQuery i napisanie tego w czystym CSSie z wykorzystaniem transform i transition i zrobić to płynnie:

img {

    -webkit-transition: transform 0.4s; /* dla iOS6 i Androida < 4.4 */

    transition: transform 0.4s;

}

img:hover {

    transform: scale(2.5);

}

Jednakże to drugie rozwiązanie mimo, że jest znacznie czystsze i wymaga dużo mniej kodu ma też swoje minusy. Transformacje działają w IE9+, a transition dopiero od wersji 10-tej. Oznacza to, że w IE9 obrazek powiększy się, lecz zrobi to w momencie najechania kursorem, nie płynnie.

JSFiddle DEMO

EDIT: Naprawiony blok kodu i linkTen post został edytowany przez Autora dnia 19.08.14 o godzinie 17:26

Temat: Zmiana rozmiaru przycisku/obrazka

Dzięki za odpowiedź!
Po napisaniu tego postu bawiłem się dalej i doszedłem właśnie do tego, że bawiłem się marginesami i udało mi się! ;)
po najechaniu myszką dany przycisk rośnie - we wszystkie strony, a po opuszczeniu przycisku przez myszkę, powraca do stanu początkowego :)
na pomysł z użyciem samego CSS nie wpadłem szczerze mówiąc, muszę wypróbować! :)