Diskuze: Načtení textu přes obrázek

JavaScript JavaScript Načtení textu přes obrázek

Avatar
adder
Člen
Avatar
adder:

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
Odpovídá na adder
kleofas.hatlapatka:

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:

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:

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:

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.