Potrebujem na to iný program alebo stačí html a css?

Dobrý deň! V škole sme sa učili základy programovania, ale mňa to chytilo, tak som si zaobstarala online htlm a css kurz, ktorý už mám kompletne spravený. Teraz si programujem stránku a prišla som na menší problém. Ide o to, že mám istý obrázok, ktorý je zároveň linkom na inú stránku. Keď kurzorom prejdem po obrázku, vybledne a zjaví sa dátum a nadpis článku, na ktorý odkazuje. Celkom sa mi to aj podarilo. Myš mám nad obrázkom - vybledne a zjaví sa text, ale zmenší sa cca o 10%... Keď som skúsila zadať tento istý kód na iný obrázok tak sa stalo zase niečo iné - obrázok vybledol, zjavil sa text, ale asi dvadsať px spodku obrázka absolútne nereagovalo...
Kód som naprogramovala cez opacity, background-color =rgba(255, 255, 255, 0.7), display, z-index a potom už len veľkosti, margin a padding.
Chýba mi dajaký kód alebo tam mám, naopak niečo navyše? Alebo jednoducho som tam naťukala niečo zle? Alebo sa to robí rovno cez iný kódovací jazyk, či program?
Za odpovede vopred ďakujem.

Ahoj,
Mozno ak uvedies priklad, tak ti s tym lahsie pomozeme. Optimalne HTML aj CSS kod ktory je pouzity pri tvojom probleme. Najlepsie ak to das do code tagov, ked to budes davat sem.

Ja zatial predpokladam ze mas nejaky element ktory prekryva samotny link a preto nefunguje (ak som spravne pochopil popis problemu). Pripadne ma <a> element zly display.

Skus pouzit v novsom prehliadaci F12 kde mas taku sipocku v lavo hore v tom okne ktore sa ti otvori a kliknut na tu sipocku a nasledne element. Aku velkost ma <a> element?

Takže ja som si <a> element, do ktorého som vložila <div> element a ako pozadie som v CSS nastavila obrázok. Tento <div> element obsahoval elementy <time> a <h3>. <div> elementu som nastavila v CSS veľkosť 420x544 px a ako display som nastavila table. Pri veľkosti <a> elementu sa mi zobrazuje iba auto x auto. Pre elementy <time> a <h3> som za bežných okolností nastavila opacity 0 a z-index 101. V prípade, že kurzorom po nich prejdem, zmenila som hodnotu opacity na 1 a pridala spomínaný background-color: rgba(255, 255, 255, 0.7).
Link funguje, len sa mi mení grafika stránky. Keď som skúsila použiť tento istý postup na iný obrázok, správal sa inak ako predošlý...
Raz sa mi, ako som už spomínala, zmenšil približne o desať percent a z druhého mi spodná časť obrázka nereaguje.

Skús to nasimulovať tu https://jsfiddle.net/
pretože z takéhoto popisu sa naozaj nedá veľa zistiť

Ďakujem!
Po dlhšom bádaní sa mi nakoniec podarilo nájsť chybný kód... veď človek sa najlepšie učí na vlastných chybách...