» Poradna » Web a internet

CSS transition > Tvorba webu

 |   |  Microsoft Windows 8.1 IE 11.0  |  [194.228.13.---]

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


Genetika a příjmení: Unikátní možnost získat test Y-DNA zdarma a dozvědět se o svých předcích

Genetika a příjmení: Unikátní možnost získat test Y-DNA zdarma a dozvědět se o svých předcích

** Projekt Genetika a příjmení hledá shody mezi osobami se stejným příjmením ** Využívá k tomu testování DNA na chromozomu Y ** Výsledky testu můžete účastí v projektu získat zdarma

11.  1.  2018 | Marek Lutonský | 3


Aktuální číslo časopisu Computer

Zachraňte nefunkční Windows

Jak nakupovat a prodávat kryptoměny

Otestovali jsme konvertibilní notebooky

Velký test 14 herních myší