» Poradna » Web a internet

CSS transition > Tvorba webu

 |   |  Microsoft Windows 8.1 IE 11.0

Dobrý den, potřeboval bych pomoci s CSS a možná i HTML. Mám na webu rozcestník s výběrem serverů. Chtěl bych aby při najetí na jeden server se obrázek změnil přechodem na jiný. To se mi podařilo. Ovšem nad obrázkem mám ještě nadpis, a pokud na něj najedu funkcí hover chtěl bych aby se také obrázek přeměnil. Nevím ovšem jak na to. Kód posílám.CSS.rozcestnik-skyblock { float: left; margin: 10px; width: 480px; border-radius: 10px 10px 0px 0px; -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);}.rozcestnik-hlavicka { background: url('obrazky-sablona/sandstone50.png'); font: bold 20px "Lato","Trebuchet MS", Arial, Helvetica, sans-serif; text-align: center; color: #A38641; text-shadow: 0px 0px 5px rgba(255, 255, 255, 1); padding: 15px; height: 20px; -webkit-border-radius: 10px 10px 0px 0px; -moz-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;}.rozcestnik-obrazek-skyblock { background: url('obrazky/rozcestnik/skyblock.png'); display: block; width: 470px; height: 100px; color: black; position: relative;}.rozcestnik-obrazek-skyblock:after { background: url('obrazky/rozcestnik/banner-skyblock1.png'); content: ""; opacity: 0; width: inherit; height: inherit; position: absolute; top: 0; left: 0; /* TRANSISITION */ transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out;}.rozcestnik-obrazek-skyblock:hover:after { opacity: 1;}HTML <a class="rozcestnik-odkaz" href="http://www.woblex.cz/pravidla/skyblock"> <div class="rozcestnik-skyblock"> <div class="rozcestnik-hlavicka"> <span class="rozcestnik-hlavicka-nadpis">SkyBlock server</span> </div> <div class="rozcestnik-obrazek-skyblock""> </div> </div> </a>Web se nachází na adrese http://woblex.cz/pravidla/. Za každou radu předem moc děkuji. Nevím si rady.


Související témata: WebKit, Radius, Shadow, Bold



Určitě si přečtěte


Velká podzimní aktualizace Windows 10 je tady: Co přináší Fall Creators Update

Velká podzimní aktualizace Windows 10 je tady: Co přináší Fall Creators Update

** Po půl roce je tu další aktualizace Windows ** A opět přináší hlavně hromadu drobných kosmetických vylepšení ** Podívali jsme se na ty nejzajímavější

17.  10.  2017 | Jakub Čížek | 186

Jak funguje největší akumulátor v Česku: podívejte se do elektrárny Dlouhé Stráně

Jak funguje největší akumulátor v Česku: podívejte se do elektrárny Dlouhé Stráně

** Přečerpávací vodní elektrárna Dlouhé stráně je obdivuhodné technické dílo ** Stejná turbína vyrábí elektřinu i tlačí vodu zpět do horního jezera ** Strojovna elektrárny je zabudována v podzemí

19.  10.  2017 | David Polesný | 25

Přichází doba hypersonických zbraní. Hrozí zvýšené riziko jaderného konfliktu

Přichází doba hypersonických zbraní. Hrozí zvýšené riziko jaderného konfliktu

** Světové mocnosti vyvíjí nové, nesmírně rychlé zbraně ** Jsou schopné pokořit rychlost Mach 5 ** Tyto zbraně mohou zvýšit riziko rozpoutání válečného konfliktu

19.  10.  2017 | Stanislav Mihulka | 20


Aktuální číslo časopisu Computer

Nový seriál o programování elektroniky

Otestovali jsme 17 bezdrátových sluchátek

Jak na nákup vánočních dárků ze zahraničí

4 tankové tiskárny v přímém souboji