NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: Nefunkční transform v Chromu

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
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.