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

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Absolvováno

Označit lekci jako neabsolvovanou

Pokračovat ve výuce

Jak se ti líbí článek?

Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500

Jak se ti kurz líbí?

Tvé hodnocení kurzuZnaků 0 z 50-500

Aktivity

adder

Člen

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>

$(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.

KleoCZ

Člen

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...

adder

Člen

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.

renew357

Člen

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

adder

Člen

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.

Nejčastěji vyhledáváné

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