| Autor | Zpráva | ||
|---|---|---|---|
| Hapipo Profil |
#1 · Zasláno: 23. 11. 2019, 10:55:38
Ahoj,
potřeboval bych poradit, jak mám přidat text přes obrázek, když na něj najedu kurzorem. Pokud možno v CSS. Živá ukázka na rozpracovaný kód zde: http://kod.djpw.cz/wytc Potřebuji, aby to ve finále vypadalo nějak tahle: 
Děkuji za rychlou radu. |
||
| RastyAmateur Profil |
#2 · Zasláno: 23. 11. 2019, 11:09:52
Hapipo:
Vytvoříš nějaký rodičovský kontejner mající nastavené relativní pozicování, do něj dáš daný obrázek. Kromě obrázku do něj dáš ještě jeden element, řekněme div. Tento div bude mít nastavenou absolutní pozici na [0, 0] a rozměry na [100%, 100%]. Defaultně bude plně průhledný, při najetí myší na ten kontejner ho uděláš mírně průhledným.
Živá ukázka A pokud to má být odkaz, prostě bude tím kontejnerem <a> a nemusíš do toho motat javascript. Popup se dá udělat i čistě s JS, ale samozřejmě do toho ti již kecat nebudu...
|
||
| Hapipo Profil |
#3 · Zasláno: 23. 11. 2019, 11:55:16
RastyAmateur:
Děkuji moc, takhle to je super, jen se ještě trápím, jak tam do toho namontovat to popup okno, tím příkazem onclick="popup('sluzby-container-one')
Děkuji |
||
| RastyAmateur Profil |
#4 · Zasláno: 23. 11. 2019, 12:28:49
Hapipo:
Prostě ho tam dej, třeba tomu kontejneru, v čem je problém? |
||
| Hapipo Profil |
#5 · Zasláno: 23. 11. 2019, 12:59:52
RastyAmateur:
Přidal jsem ho tam, ale nefunguje to, nejde na to kliknout <img src="https://www.jans.cz/imgs/sluzby/ikona1_neaktiv.jpg" class="sluzby-img-left" onclick="popup('sluzby-container-one')"> |
||
| RastyAmateur Profil |
#6 · Zasláno: 23. 11. 2019, 18:08:02
Hapipo:
Tak logicky, když je to překryté jiným elementem. Psal jsem kontejneru. Také by bylo dobré tomu nastavit cursor: pointer
|
||
| Hapipo Profil |
#7 · Zasláno: 24. 11. 2019, 12:15:53
Už jsem na to přišel... Díky moc za radu...
|
||
| RastyAmateur Profil |
#8 · Zasláno: 24. 11. 2019, 12:42:38
Hapipo:
Ještě bych rád zdůraznil to, že to, co se zobrazí přes ten obrázek je úplně normální element a taky se k němu tak můžeš i chovat. Může do něj vkládat další elementy, napojovat na to JS, dát do něj odkazy, inputy, cokoliv... :-) |
||
|
Časová prodleva: 9 dní
|
|||
| Hapipo Profil |
#9 · Zasláno: 3. 12. 2019, 12:05:20
RastyAmateur:
Ještě bych potřeboval pomoci, jak v té galerii udělat něco podobného. Už jsem to zkoušel podobně, podle rad výše, ale nejde mi to... ZDE ÚPRAVY V té galerii bych chtěl něco takového s animací, že se to po najetí kurzoru zvětší ten popisek. staticky: 
po najetí kurzorem s animací: 
Prosím moc o pomoc mi to zasadit do kódu: ŽIVÁ UKÁZKA Děkuji mooc |
||
| RastyAmateur Profil |
#10 · Zasláno: 3. 12. 2019, 21:35:31
Hapipo:
V ukázce máš dané texty přímo v obrázku, s tím nic neuděláš. Pokud texty předěláš do CSSka, tak zvětšení je přeci jednoduché! <div class="image">
<img>
<span>Popisek</span>
</div>
.image span {
font-size: 1em;
transition: 300ms;
}
.image:hover span {
font-size: 2em;
} |
||
| Hapipo Profil |
#11 · Zasláno: 4. 12. 2019, 15:41:13
RastyAmateur:
zkouším to tam vložit, ale právě mi to nechce zobrazit korektně: <div class="portofolio-imgs">
<img src="imgs/portfolio/kategorie/kategorie_1.jpg" class="portfolio-img-slide" data-src="imgs/portfolio/wms_logo.jpg" data-alt="Popisek" onclick="openGallery1(this)"><span>Popisek</span>
<img src="imgs/portfolio/kategorie/kategorie_2.jpg" class="portfolio-img-slide" data-src="imgs/portfolio/casopis_1.jpg" data-alt="Popisek" onclick="openGallery2(this)"><span>Popisek</span>
<img src="imgs/portfolio/kategorie/kategorie_3.jpg" class="portfolio-img-slide" data-src="imgs/portfolio/web_chata1.jpg" data-alt="Popisek" onclick="openGallery3(this)"><span>Popisek</span>
.portofolio-imgs {
width: 100%;
display:flex;
overflow-x:auto;
/*-webkit-overflow-scrolling:touch;
padding-right:20px;*/
}
.portfolio-imgs span {
font-size: 1em;
transition: 300ms;
}
.portfolio-imgs:hover span {
font-size: 2em;
} |
||
| Tomášeek Profil |
Hapipo:
Pravděpodobně se jedná o web webového "studia". Proč se nezeptáš kodéra, který tvořil třeba referenci s obrázkem web_chata1.jpg?
Ten kód, který jsi uvedl, je nesmysl. Ne, že by nefungoval (funguje, pokud si srovnáš pojmenování jednotlivých elementů), ale bude fungovat jinak, než si myslíš. |
||
| RastyAmateur Profil |
RastyAmateur:
„V ukázce máš dané texty přímo v obrázku, s tím nic neuděláš.“ Copak ty to tam nevidíš? Halo? Souhlasím s Tomáškeem. Z toho, co jsi uvedl, tak mám pocit, že tě ani nelze dál nasměrovat či jinak poradit bez toho, abychom to vlastně udělali za tebe. |
||
| Hapipo Profil |
#14 · Zasláno: 4. 12. 2019, 17:22:15
Zaměřuji se na tištěnou grafiku a kodér už se mnou nespolupracuje, takže se snažím vlastními silami.
Jinak ty texty o obrázků bych odstranil a pak bych přidal css. Díky moc. Nějak to zkusím pokutit z toho, co jste poradili. |
||
| Tomášeek Profil |
Hapipo:
Tak věz, že ten kód z #11 funguje, jen pozor na portfolio vs. portofolio, proto to nic nedělá.
Druhá věc, na kterou jsem narážel, byla funčknost. Nyní se ti zvětší všechny popisky naráz, co nechceš. Potřebuješ něco jako .portfolio-imgs img:hover + span pro zvětšení právě jednoho popisku patřícího k danému obrázku. Tohle nebude pro změnu fungovat při najetí na samotný popisek.
Řešením bude buď každý obrázek+popisek obalit zvlášť, pak bude fungovat .obal:hover span, nebo možná selektor .portfolio-imgs img:hover + span, .portfolio-imgs span:hover (nemám kde ozkoušet).
|
||
|
Časová prodleva: 4 roky
|
|||
0