nieruchomwe zdjecie w html

Question

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ć?

Answer 1

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

 

Comments

oo faktycznie działa, dziękuję za pomoc.
A wiesz jeszcze może, jak uniknąć "podskakiwania strony", tak jakby się odświeżała.

---

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

---

Problem rozwiązany, po prostu podczas przeładowania zdjęć, zmniejszała sie wielkosc div'a, więc musiałem ustawić na sztywno wysokosc :D