Diskuze: CSS:gallery image hover animated effect

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

Aktivity

majo.hattrick

Člen

majo.hattrick:28.4.2017 18:20

Caute,
poradite mi prosim, ako dosiahnut hover animovany efekt ako je na obrazku?

Pri hoveri by malo dojst k animacii margin-top celeho <a> elementu (toto mam), k malemu bottom crop obrazku a zaroven k posunutiu hore <h4>, a zobrazeniu <p>.

Skusal som aj nieco s padding-bottom na <a> ale nefungovalo to vobec.

(kod je zjednoduseny a ocisteny od mojich pokusov...)
HTML

 <div class="gallery row">
        <a href="">
        <img src="house.jpg" alt="">
                <h4>Architektúra</h4>
                <p>5 fotiek</p>
        </a>
</div>

CSS

.gallery{
    margin: 0 auto;
}

a {
    display: inline-block;
    float: left;

    position: relative;
    overflow: hidden;
    padding: 0;

    width: 265px;
    height: 220px;
    margin-top: 25px;
    margin-left: 0;
    margin-right: 25px;
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);
    border-radius: 5px;

}

a img {
    width: 265px;
    border-radius: 5px 5px 0 0;
    height: 160px;
    margin-bottom: 20px;
}

a:hover {
    text-decoration: none;
    margin-top: 15px;
    -webkit-transition: margin-top 0.5s;

}
h4 {
    font-family: inherit;
    font-size: 100%;
    letter-spacing: 0.063em;
    text-align: center;
    text-transform: uppercase;
    color: #555555;
}

Dakujem

Odpovědět

28.4.2017 18:20

Honza Bittner

Tvůrce

Honza Bittner:29.4.2017 0:11

Třeba takto https://jsfiddle.net/6y1g2hhz/3/

Udělal jsem nějaké úpravy i mimo, například to, že <a> nemá (a mít by neměl) žádné styly co se rozložení týče a měl by tedy jen sám vyplnit klikatelné místo, nic víc.

Co se týče obrázku, pro tvůj konkrétní případ bude nejspíše lepší jej předávat přes CSS, jelikož zmenšení <img> by způsobilo i jeho deformaci, což pravda jde v CSS nastavit, aby se tak nedělo, ale tato vlastnost (http://caniuse.com/#…) není dobře podporovaná, takže jsem se jí vyhnul. A obrázek pak samozřejmě měním pomocí úpravy dolního paddingu – šlo by udělat, aby se měnila jen přímo height, ale pokud bys chtěl měnit výšku, musel bys upravovat dvě místa, což takto nemusíš.

A transition nikdy nedávat na :hover (to jen ve speciálních případech), jelikož animace z :hover do normálu pak není plynulá, jelikož žádnou nemá nastavenou pak.

Akceptované řešení
+5 Zkušeností

Nahoru Odpovědět

29.4.2017 0:11

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

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 2 zpráv z 2.