CSS transition
Napsal: 08 čer 2015 21:35
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
HTML
Web se nachází na adrese http://woblex.cz/pravidla/. Za každou radu předem moc děkuji. Nevím si rady.
CSS
Kód: Vybrat vše
.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
Kód: Vybrat vše
<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.