» 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

Byli tam! Důkazy o přistání na Měsíci, Lunochody i čínská sonda jsou vidět z vesmíru

Byli tam! Důkazy o přistání na Měsíci, Lunochody i čínská sonda jsou vidět z vesmíru

** Sonda LRO pořídila z oběžné dráhy Měsíce zajímavé snímky ** Jsou na nich vidět artefakty všech misí programu Apolla, které přistály na povrchu Měsíce ** Jde například o části lunárních modulů, rovery a dokonce i vlajky

Petr Kubala | 60

Šmírovačka kamerami Googlu: Koukněte se, co nového zachytily na Street View

Šmírovačka kamerami Googlu: Koukněte se, co nového zachytily na Street View

Google stále fotí celý svět do své služby Street View. A novodobou zábavou je hledat v mapách Googlu vtipné záběry. Podívejte se na výběr nejlepších!

redakce | 44

Nová zbraň Microsoftu proti iPadu: Levný tablet Surface Go bude stát jen deset tisíc

Nová zbraň Microsoftu proti iPadu: Levný tablet Surface Go bude stát jen deset tisíc

** Microsoft představil nový tablet Surface Go ** Nový model zaujme nízkou cenou, ale schopnostmi zařízení Surface ** Microsoft nepoužil čip ARM, ale klasický procesor od Intelu 

Karel Javůrek | 116

Apple: naše mapy budou nejlepší na světě. Tajně jsme na nich pracovali několik let

Apple: naše mapy budou nejlepší na světě. Tajně jsme na nich pracovali několik let

** Apple odhalil své plány na zcela nové mapy ** Několik let pracuje na nových mapách, které by měly předběhnout konkurenci ** Objeví se s příchodem iOS 12 pro vybrané státy

Karel Javůrek | 50


Aktuální číslo časopisu Computer

Velký test 18 bezdrátových sluchátek

Vše o přechodu na DVB-T2

Procesory AMD opět porážejí Intel

7 NVMe M.2 SSD v přímém souboji