IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
pgarsky
Člen
Avatar
pgarsky:12.4.2020 20:43

Zdravím,
programuji webovou stránku, na které se mají zobrazit 4 obrázky bytů a když najedu na jeden z nich myší, má se mírně zvětšit. K tomu používám funkci "transform" a na efekt funkci "transition".
Ve všech prohlížečích to funguje, avšak v Chromu (mám nejnovější verzi) se spustí po najetí myši krátký delay, po kterém se teprve obrázek začne zvětšovat. Po odjetí myši z obrázku se začne zmenšovat opět až po krátkém delay.

Zkusil jsem: flats.html:

<div class="flat-cards">
        <div class="card">
            <img src="images/flat2.jpeg">
        </div>
        <div class="card">
            <img src="images/flat2.jpeg">
        </div>
        <div class="card">
            <img src="images/flat2.jpeg">
        </div>
        <div class="card">
            <img src="images/flat2.jpeg">
        </div>
    </div>

styl:

.flat-cards {
    padding: 13% 23%;
    width: 100%;
}

.card {
    display: inline-block;
    margin: 20px;
    cursor: pointer;
    width: auto;
    height: auto;
}

.card:hover img {
    transform: scale(1.2);
    box-shadow: 0 0 10px black;
}

.card img {
    width: 200px;
    height: 200px;
    display: block;
    transition: 0.5s;
}

Zajímavou poznámkou je, že když jsem vyjmul pouze kód výše z projektu a udělal nový soubor úplně mimo, do kterého jsem ho vložil, fungovalo to i v Chromu.

Chci docílit: Rád bych, aby se obrázek zvětšoval hned po najetí myši, jako například na tomto příkladu: https://www.w3schools.com/howto/tryit.asp?…

Děkuji předem.

Odpovědět
12.4.2020 20:43
Pokud ti něco jde těžko, znamená to, že jdeš tou správnou cestou...
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na pgarsky
Jaroslav Smrž:12.4.2020 21:27

Tento kód normálně funguje, jak má. Sice bych tedy zvolil jiný způsob sizingu, ale transform je OK. Jestli ti něco nejde, tak chyba bude na jiném místě, třeba neuzavřený div nebo tak něco.

Nahoru Odpovědět
12.4.2020 21:27
/* Life runs on code */
Avatar
pgarsky
Člen
Avatar
Odpovídá na Jaroslav Smrž
pgarsky:12.4.2020 21:29

Ale na jiných prohlížečích to v pořádku funguje. Pouze u Chromu je tento problém.

Nahoru Odpovědět
12.4.2020 21:29
Pokud ti něco jde těžko, znamená to, že jdeš tou správnou cestou...
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na pgarsky
Jaroslav Smrž:12.4.2020 22:21

Těžko říct. Zkoušel jsi mazat všechna data z chromu? Jestli nemá uloženou nějakou starší verzi toho webu?

Nahoru Odpovědět
12.4.2020 22:21
/* Life runs on code */
Avatar
pgarsky
Člen
Avatar
Odpovídá na Jaroslav Smrž
pgarsky:13.4.2020 8:10

Ano, zkoušel. Nepomohlo to.

Nahoru Odpovědět
13.4.2020 8:10
Pokud ti něco jde těžko, znamená to, že jdeš tou správnou cestou...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.