Efekt powiększania zdjęcia

Question

Mam taki pomysł tylko nie wiem jak do niego podejść, a mianowicie. Mam na stronie div'y, w których umieszczone są <img> i teraz chciałbym używając zdarzenia mouseenter sprawić, aby to img się podmieniło na inne. Może to działać na zasadzie toggleClass(), ale to tylko taka moja sugestia. Jak macie jakieś fajne pomysły to jestem otwarty na propozycje.

Answer 1

Chyba łatwiej zrobić w css za pomocą

div:hover{
transform: scale(1.5);
}

 

Comments

Ale on chce zmienć obrazek :)

Aczkolwiek hover'em też by się dało
 

div:hover 
{
   background-image:url(xxx.png);
}

Możesz dodać do tego jakieś animacje właśnie, za pomocą transition zrobić efekt przejścia itp. :)

 

---

W tytule jest powiększanie zdjęcia.

---

Rzeczywiście :) Ale w treści też autor pisał o podmianie ;)

---

W sumie wypróbowałem wariant z podmianą i wariant bez podmiany. Dołożyłem tylko animacje. Dzięki za podpowiedź. Kod CSS ostatecznie wygląda tak:

.img-team:hover{
-ms-transform: scale(1.4);
transition-duration: 3s;
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
}

 

---

A co zrobić kiedy zdjęcie jest przy krawędzi ekranu i kiedy powiększamy to część zdjęcia ucieka poza ekran? Jakaś szansa aby to wycentrować? Albo może użyć innej techniki?

Dobra już sobie poradziłem sam. 

transform: scale(2) translateX(-50px);

 

Answer 2

Może daj ten obrazek w divie przez CSSa i później zastosuj dynamiczną zmianę styli w JS zmieniając ścieżkę obrazka po zdarzeniu.