Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
adder
Člen
Avatar
adder:30.7.2014 20:17

ahoj, mám malej problém. chtěl bych, aby se mi nadpis a text v divu .galery-images jednoduše zobrazily přes obrázek. když to mám takhle (kód níže), tak to divně uskakuje, když dám např.

$(document).ready(function(){
        $('.galery-images').hover(function(){
                $('.galery-mouseenter').fadeToggle(200);
        });
});

tak se pochopitelně zobrazují zároveň všechny texty, ale jinak funkčnost je ok. Potřebuji při najázdu (hover), aby vyjel u konkrétního text. Děkuji za pomoc. Mějte se hezky :)

HTML

<section id="galery">
        <div class="galery-images">
          <a href="foto/demo.php">
              <img src="images/img.jpg" alt="">
              <div class="galery-mouseenter">
                <h3>Jana</h3>
                <p>Letni mashup v galerii</p>
              </div>
          </a>
        </div>

        <div class="galery-images">
          <a href="foto/demo.php">
              <img src="images/img.jpg" alt="">
              <div class="galery-mouseenter">
                <h3>Jana</h3>
                <p>Letni mashup v galerii</p>
              </div>
          </a>
        </div>

</section>

JS

$(document).ready(function(){
        $('.galery-images').hover(function(){
                $(this).find('div').fadeToggle(200);
        });
});

CSS

galery{
  margin-top: 20px;
  width: 100%;
  height: auto;
}
.galery-images {
  width: 20%;
  height: 200px;
  margin-right: 4%;
  display: inline-block;
}
#galery img {
  width: 100%;
  height: 200px;
  border:2% solid #EEEEEE;
  border-bottom:5% solid #eeeeee;
}
.galery-mouseenter {
  display: none;
  z-index: 100;
  width: 100%;
  height: 200px;
  position: relative;
  top: 0;
  background: rgba(0,0,0, 0.5);
  margin-top: -205px;
}
#galery .last-picture {
  margin-right: 0;
}
.name-of-pictures {
  margin-top: -3%;
  margin-left: 15%;
  color: black;
Editováno 30.7.2014 20:18
Odpovědět
30.7.2014 20:17
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
KleoCZ
Člen
Avatar
Odpovídá na adder
KleoCZ:4.8.2014 10:09

Zdravim, pokusil jsem se to opravit s co nejmenším zásahem do kódu, snad ti to bude stačit.

http://jsfiddle.net/Kleo86/gYvGU/

Nahoru Odpovědět
4.8.2014 10:09
Apeluji na všechny co odpovídají na dotazy, tak pokud je to jen trochu možné dávejte rovnou reálná řešení třeba v htt...
Avatar
adder
Člen
Avatar
adder:4.8.2014 10:18

Díky moc, super. Jsem ti za to vděčný. :)

Nahoru Odpovědět
4.8.2014 10:18
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
renew357
Člen
Avatar
renew357:4.8.2014 11:09

Zaujmalo by ma aké používate na ppisanie webu nástroje?
http://jsfiddle.net/ --štruktúra sa mi páči ale, je niečo podobné dostupné aj ako desktopová aplikácia?

 
Nahoru Odpovědět
4.8.2014 11:09
Avatar
adder
Člen
Avatar
Odpovídá na renew357
adder:4.8.2014 11:42

Jestli chceš něco podobného, tak asi Adobe Dreamweaver, myslím, ale nejsem si jist.

Nahoru Odpovědět
4.8.2014 11:42
I’m going to lay this brick as perfectly as a brick can be laid.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.