Vlastny filter na obrazky

jefitto44:
CSS blend

Není to sice tak elegantní, ale stačí dát elementu pozadí, do něj vložit obrázek a obrázku nastavit průsvitnost. Nakódování je pro průměrného kodéra triviální záležitost.
Stejného vizuálního výsledku jde dosáhnout, když bude průsvitný element se vzorkem nad obrázkem, ale to je složitější na nakódování.

jefitto44:
No však jeden obrázok bude ako pozadie a druhý „normálny“ <img> a vo výsledku sa ti „zmiešajú“.

jefitto44:
„div bude position:relative“
A zůstane po něm díra. Nehledě na to, že pozice bude závislá na rozměrech obrázku.
Pokud bys použil řešení [#3], tak na problémy, které nastanou při pozicování [#6], není třeba vůbec myslet.

„dať mu z-index.“
Kýho šlaka proč? V tomto případě šikovný kodér se bez z-indexu obejde, později element (v HTML) je výše. A nakonec, je v tomto případě úplně jedno, zda bude nahoře DIV, nebo obrázek, ale je důležité je, aby horní element byl průsvitný deklarováním CSS opacity.

jefitto44:
Živá ukázka s pomocí background v CSS
Živá ukázka s img v HTML
U obou případů je druhá deklarace .pozadi zbytečná, ale může tam být.

Jak prosté od Bubáka: Živá ukázka

Taurus:
Skoro tak jsem to myslel, základní myšlenka je jasná, ale já měl na mysli pixel perfekt řešení (bez mezery pod obrázkem), pokud by po něm někdo toužil, tak:
http://kod.djpw.cz/heib
http://kod.djpw.cz/heib-
Dovolil jsem si i "optimalizaci pro IE6", takže jsem místo DIVu použil SPAN a přidal jsem filter.

[#8] Marschmallow:
Netuším proč, ale nefunguje v klasické Opeře, předpokládám, že půjde o nějakou drobnost, ve zchromené Opeře je to v pořádku.

Bubák:
Já právě chtěl jen demonstrovat tvůj jednoduchý nápad tím, že nepřidám nic navíc. Vyladění je určitě na místě.

Taurus:
Je to tak jednoduché, že jsem sem záměrně nechtěl dát hotové řešení, ať si jefitto44 provětrá mozkové závity. Ale pokud už to bylo v podstatě venku, tak jsem to tady dal komplet.
Už v roce 2001 jsem udělal něco podobného, zmizení vzorku při hoveru obrázkového odkazu, ale fungovalo to jen v IE (Firefox tenkrát teprve začal vystrkovat růžky) a odkazu, který měl na pozadí vzorek, nebylo potřeba deklarovat odkazu inline-block, protože odkaz se v IE roztáhl podle velikosti obrázku.

Toto riešenie som vytvoril ako ukážku, ale keďže ich tu bolo už dosť, rozhodol som sa nechať si ju pre seba. Teraz som svoje rozhodnutie zmenil. Vaše ukážky som videl iba zbežne, a tú svoju vytváral nezávisle od vašich. Snáď prinesiem novú variantu: Živá ukážka.

Bubák:
„nechtěl dát hotové řešení“

Vím moc dobře o čem mluvíš, chtěl jsem si pro jednou vyzkoušet Strawberryho udělátor :-)