• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

nieruchomwe zdjecie w html

+1 głos
70 wizyt
pytanie zadane 23 maja 2021 w HTML i CSS przez Hubert Wajda Obywatel (1,220 p.)
edycja 23 maja 2021 przez Hubert Wajda

Mam ustawione obok siebie zdjęcia, jedne są wielkości 75x111 niektóre 165x111, margin ma na 7px o raz chciałbym, aby po najechaniu kursorem na jedno ze zdjęć, powiększało się troszkę, tylko tak żeby nie wpływało to na miejsce innych zdjęć, a one się trochę ruszaja.

.miniaturka{
	margin:7px;
	cursor:pointer;
}
.miniaturka:hover{
	transform: scale(1.2);
	border: 2px solid #DD8700;
}
<img onclick="zmienslajd(1);" class="miniaturka" src="materialy/fotografia/zdjecie1-mini.jpg" />
					<img onclick="zmienslajd(2);" class="miniaturka" src="materialy/fotografia/zdjecie2-mini.jpg"  />
					<img onclick="zmienslajd(3);" class="miniaturka" src="materialy/fotografia/zdjecie3-mini.jpg"  />
					<img onclick="zmienslajd(4);" class="miniaturka" src="materialy/fotografia/zdjecie4-mini.jpg"  />
					<img onclick="zmienslajd(5);" class="miniaturka" src="materialy/fotografia/zdjecie5-mini.jpg" />
					<img onclick="zmienslajd(6);" class="miniaturka" src="materialy/fotografia/zdjecie6-mini.jpg" />
					<img onclick="zmienslajd(7);" class="miniaturka" src="materialy/fotografia/zdjecie7-mini.jpg" />
					<img onclick="zmienslajd(8);" class="miniaturka" src="materialy/fotografia/zdjecie8-mini.jpg" />
					<img onclick="zmienslajd(9);" class="miniaturka" src="materialy/fotografia/zdjecie9-mini.jpg" />
					<img onclick="zmienslajd(10);" class="miniaturka" src="materialy/fotografia/zdjecie10-mini.jpg" />
					<img onclick="zmienslajd(11);" class="miniaturka" src="materialy/fotografia/zdjecie11-mini.jpg" />
					<img onclick="zmienslajd(12);" class="miniaturka" src="materialy/fotografia/zdjecie12-mini.jpg" />
					<img onclick="zmienslajd(13);" class="miniaturka" src="materialy/fotografia/zdjecie13-mini.jpg" />
					<img onclick="zmienslajd(14);" class="miniaturka" src="materialy/fotografia/zdjecie14-mini.jpg" />
					<img onclick="zmienslajd(15);" class="miniaturka" src="materialy/fotografia/zdjecie15-mini.jpg" />
					<img onclick="zmienslajd(16);" class="miniaturka" src="materialy/fotografia/zdjecie16-mini.jpg" />
					<img onclick="zmienslajd(17);" class="miniaturka" src="materialy/fotografia/zdjecie17-mini.jpg" />
					<img onclick="zmienslajd(18);" class="miniaturka" src="materialy/fotografia/zdjecie18-mini.jpg" />
					<img onclick="zmienslajd(19);" class="miniaturka" src="materialy/fotografia/zdjecie19-mini.jpg" />
					<img onclick="zmienslajd(20);" class="miniaturka" src="materialy/fotografia/zdjecie20-mini.jpg" />

EDIT:

I jeszcze jedna rzecz, za pomocą js wyswietlam klikniete zdjecie ponizej, ale niestety, czasami przy kliknieciu i zmiany zdjecia, strona "podskakuje" na samą góre, jak tego uniknać?

1 odpowiedź

0 głosów
odpowiedź 23 maja 2021 przez VBService VIP (145,790 p.)
edycja 24 maja 2021 przez VBService

Bo w :hover, ustawiasz (dodajesz na czas trwania zdarzenia) dodatkowe 2px border do okoła img-a.

.miniaturka {
    . . .
    border: 2px solid transparent;
    transition: all 0.5s; /* płynne scale-owanie */
}

możesz także

.miniaturka {
  margin: 7px;
  cursor: pointer;
  transition: all 0.5s;
}
.miniaturka:hover {
  transform: scale(1.2);
  box-shadow: 0 0 2px 2px #DD8700;
}

 

1
komentarz 23 maja 2021 przez Hubert Wajda Obywatel (1,220 p.)
oo faktycznie działa, dziękuję za pomoc.
A wiesz jeszcze może, jak uniknąć "podskakiwania strony", tak jakby się odświeżała.
komentarz 23 maja 2021 przez VBService VIP (145,790 p.)

Wrzuć kod na np.: codepen-a, proszę, bo z tego kodu co już udostępniłeś ciężko jest wywnioskować jaka jest tego przyczyna.

1
komentarz 24 maja 2021 przez Hubert Wajda Obywatel (1,220 p.)
Problem rozwiązany, po prostu podczas przeładowania zdjęć, zmniejszała sie wielkosc div'a, więc musiałem ustawić na sztywno wysokosc :D

Podobne pytania

0 głosów
1 odpowiedź 321 wizyt
0 głosów
2 odpowiedzi 343 wizyt
pytanie zadane 19 października 2016 w HTML i CSS przez Alex.Ironside Stary wyjadacz (14,900 p.)
0 głosów
2 odpowiedzi 347 wizyt
pytanie zadane 4 sierpnia 2017 w Grafika i multimedia przez wxa123 Użytkownik (680 p.)

86,541 zapytań

135,291 odpowiedzi

300,649 komentarzy

57,288 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...