Autor Zpráva
matata8611
Profil
Ahoj,
jak prosim dosilit plynule zmeny obrasku na pozadi pri hover?
Kdyz nastavim divu bg img a transition napr 0,5s tak to prejizdi ze strany... potrebuji aby se to plynule zmenilo. Lze to prosim nejak?
juriad
Profil
Ukaž co máš, nějak to doupravíme.
Bubák
Profil
Pokud máš na mysli background-image, tak zmíněná vlastnost nepatří mezi animovatelné vlastnosti. Svého času animovaly background-image jen prohlížeče na jádru Chromium/Blink, jaká je situace nyní, netuším, ale Chrome stále animovanou změnu background-image podporuje.
Živá ukázka
Odkaz
matata8611
Profil
Napr toto:
a {display: block; width: 304px; height: 228px; overflow: hidden; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s;}
a:hover {text-indent: -304px;}

<a href="#"><img src="motyl12.jpg" width="608" height="228" alt="Tropický motýl" /></a>

jedna se o dva obrazky vedle sebe... to asi pochopite... klidne bych ale dal dva ruzne (samostatne) obrazky. Jeden pri nacteni a druhy pri hoveru...


Klidne to samozrejme udelejme pres JS. Je mi to jedno, ale nevim jak na to.
Bubák
Profil
matata8611:
Co vlastně chceš, animovanou změnu obrázku tedy elementu <img>, nebo změnu obrázku na pozadí, tedy CSS vlastnost background-image?
Možní ti pomůže Plynulá změna obrázků => koukni se do zdrojového kódu
matata8611
Profil
super díky

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: