Powiększenie zdjęcia po najechaniu myszką

Dla specjalistów Webmastering
#1

Jak zrobić by po najechaniu myszką zdjęcie powiększyło się(tylko jedno zdjęcie grupowe całej drużyny) ?

#2

thumbnail zoom plus

#3

Css’em też można:

http://dapinder.com/zoom-images-on-mouse-hover-using-css3/

#4

Ale jak to zrobić,gdzie to coś wrzucić ?

#5

Co do rozwiązania css, jeśli zdjęcie siedzi w jakimś div’ie o konkretnej nazwie/klasie lub samo ma nadaną nazwę/klasę, to pozostaje kod css spod linku nieco “przerobić” i wstawić go do pliku css strony (plik przeważnie zwie się “style.css”).

#6

A mógłbyś mi pomóc umieścić ten kod

#7

http://codepen.io/anon/pen/vEozLx

Odnajdź w kodzie strony zdjęcie, będzie w tagu img:

przykład

<img src="ścieżka do pliku" alt="tekst zamiast grafiki" />

Nadaj jemu klasę o nazwie “lupa”:

<img class="lupa" src="ścieżka do pliku" alt="tekst zamiast grafiki" />

Skopiuj z powyższego linku kod css i wklej w główny plik css strony (najpewniej zwie się “style.css”). Css jest ustawiony na dwukrotne skalowanie (zoom), jeśli chcesz zmienić na jakieś “ułamkowe” zmieniasz “scale(2)” na np. “scale(1.5)” (ważne byś nie przekręcił kropki na przecinek, ponieważ oba znaki działają inaczej…).

PS. Ewentualnie możesz też nie próbować kombinować z kodem strony i dopisywać klasy do zdjęcia, wtedy należałoby nieco przerobić podany w linku css i zamiast “.lupa” wpisać selektor atrybutu nastawiony na nazwę zdjęcia spod ścieżki źródła:

Zamiast

.lupa{
...
}
.lupa:hover{
...
}

dajesz np.

img[src$="huragan_morg.jpg"]{
...
}
img[src$="huragan_morg.jpg"]:hover{
...
}
#8

Dzięki bardzo,zaraz biorę się za to