JavaScript OnMouseOver Probleme

[RageComics]

Hallo,
Ich bastel seit etwa einer Stunde an einem Downloadhyperlink herum. Dieser soll mit Bildern ausgeschmückt sein.
Um zu sehen, was ich bisher gemacht habe, hier der Link zu der HTML Datei: http://jomabeats.com/overlayzeugs/test.html
Ich konnte jedoch bis jetzt zwei Dinge nicht realisieren:

1. Ich möchte, dass das Overlay beim Mouseover weich eingeblendet wird
und nicht einfach drübergeklatscht wird.
2. Wenn ich auf das Bild klicke, verschwindet das Overlay kurz. Das sollte eigentlich nicht so sein.

Wäre super, wenn ihr mir bei meinem Problem helfen könntet

 

[Daaron]

Nimm kein JavaScript, nimm CSS3.

 

[RageComics]

Nimm kein JavaScript, nimm CSS3.

Wie kann ich es denn mit CSS3 umsetzen?

 

[Daaron]

Das Zauberwort heißt "transition". Den Rest darfst du selbst herausfinden.

 

[RageComics]

Das Zauberwort heißt "transition". Den Rest darfst du selbst herausfinden.

danke, dass war tatsächlich das zauberwort

Ergänzung (19. Januar 2014)

leider habe ich immernoch das problem, dass das overlay beim anklicken kurz verschwindet :/

 

[T0a5tbr0t]

Das Bild ist ja auch in einem <a> tag. Bei einem klick wird einfach die Seite neu geladen...
Also entweder den link entfernen oder sowas wie href="#" nehmen.

 

[RageComics]

aber der link soll ja später zum download führen

 

[Daaron]

Ja... und?
Jeder Link, der nicht auf dasselbe Dokument mit einem Fragment führt, sorgt für einen Reload -> du hast dein Flackern. Anders verhält es sich dann mit Download-Links. Verlink doch dort mal ne Demo-Zip, da wirste sehen, dass nix mehr flackert.

 

[RageComics]

klasse hat geklappt danke