CSS transition Vyřešeno

[MrFiliper]

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

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.

[Reklama]

[CZechBoY]

Zdravím,
co takhle použít hover na obalovacím divu, nebo ~ selektor.

Kód: Vybrat vše

.rozcestnik-obrazek-skyblock:hover:after, .rozcestnik-hlavicka:hover + .rozcestnik-obrazek-skyblock:after {
    opacity: 1;
}
 

[MrFiliper]

Díky Ti moc! Už jsme si nevěděl rady, ale funguje.