Hover: zamiana obrazka na inny

pytanie zadane 30 grudnia 2017 w HTML i CSS przez dominikm Nowicjusz (140 p.)

Witam,

Mój problem jest następujący:

Chciałem w CSS dla danego diva jako tło dać obraz, a po najechaniu myszką, ma nastąpić zamiana obrazka na inny. Udało mi się uzyskać taki efekt, ale nie tak zadowalający, ponieważ za pierwszym razem kiedy najeżdżam na obraz to przez jakieś ułamki sekund jest widoczne białe tło.. Chciałbym temu zapobiec, ewentualnie prosić o radę czy można to zrobić jakoś w inny sposób.

.square1
{
	margin: 1px;
	width: 370px;
	height: 245px;
	background-image: url(MÓJ LINK);
	float: left;
	
}
.square1:hover
{
margin: 1px;
	width: 370px;
	height: 245px;
	background-image: url(MÓJ LINK2);
	float: left;

}

2 odpowiedzi

odpowiedź 30 grudnia 2017 przez Szymon Ciompała Mądrala (6,280 p.)

Wydaje mi sie ze widoczne jest białe tło bo zdjęcie ma dużą wagę i się po porostu nie zdążyło wczytać. Spróbuj dać transition to może nie bedzie tego aż tak widać :)

komentarz 30 grudnia 2017 przez dominikm Nowicjusz (140 p.)

Zdjęcia mają wagę średnio 100kB, czy to dużo ?

Z transition próbowałem, ale niestety nie zadziałało :/

komentarz 30 grudnia 2017 przez Szymon Ciompała Mądrala (6,280 p.)

zdjęcia ładujesz z internetu czy z dysku ?

komentarz 30 grudnia 2017 przez dominikm Nowicjusz (140 p.)

z internetu, myślisz, że w tym problem??

komentarz 30 grudnia 2017 przez Szymon Ciompała Mądrala (6,280 p.)

Może to być wina słabego łączą bądź dużo zdjęć pobierasz. Spróbuj pobrać parę zdjęć na dysk i zobacz jak to wygląda. Powodzenia :)

odpowiedź 30 grudnia 2017 przez Bazinga Bywalec (2,120 p.)

Prawdopodobnie przyczyną jest zbyt wolne łącze (Twoje, lub serwera na którym masz zdjęcia).

Alternatywą jest zmuszenie przeglądarki do pobrania drugiego zdjęcia od razu, jednak w taki sposób aby hierarchicznie było ono niżej niż zdjęcie które chcemy, aby było widoczne na początku.

1.Dodanie linijki kodu przez pierwszym zdjęciem.

.square1
{
    margin: 1px;
    width: 370px;
    height: 245px;
    background-image: url(MÓJ LINK2);
    background-image: url(MÓJ LINK);
    float: left;     
}

,albo

2. Dodanie do diva id, albo klasy i odpowiedni kod w CSS

.square1a
{
    background-image: url(MÓJ LINK2);
}

.square1
{
    margin: 1px;
    width: 370px;
    height: 245px;
    background-image: url(MÓJ LINK);
    float: left;     
}