RollOver Scroll Over Effekt

[invisiblekilla]

Moin zusammen,

kennt jemand eine Methode für ein RollOver Effekt für Bilder, wo das RollOverImage aber nicht einfach nur umspringt sondern einfaded oder reingeschoben wird.
Blöde Erklärung... Ich weiß, deswegen hier ein Beispiel unter dem Punkt PORTFOLIO:

http://www.thomasjbertram.de/

Jemand ne Idee das zu lösen ohne enorme Programmierkenntnisse dafür nutzen zu müssen?

Danke schnomal

Gruß Oli

 

[Waegi]

AW: RollOver Scroll Over Effekt

Wenn man mal in den CSS-Code schaut, sieht man das hier:

	#portfolio ul.thumbs li.beapanda a { background: url("../../img/works/beapanda/thumb.jpg") 0 0 no-repeat; } 	#portfolio ul.thumbs li.hpbertram a { background: url("../../img/works/hpbertram/thumb.jpg") 0 0 no-repeat; } 	#portfolio ul.thumbs li.einspruch a { background: url("../../img/works/1spruch/thumb.jpg") 0 0 no-repeat; } 	#portfolio ul.thumbs li.newcomer a { background: url("../../img/works/newcomer/thumb.jpg") 0 0 no-repeat; } 	#portfolio ul.thumbs li.abschlusspruefung a { background: url("../../img/works/abschlusspruefung/thumb.jpg") 0 0 no-repeat; } 	#portfolio ul.thumbs li.logos a { background: url("../../img/works/logos/thumb.jpg") 0 0 no-repeat; } 	#portfolio ul.thumbs li.websites a { background: url("../../img/works/websites/thumb.jpg") 0 0 no-repeat; } 	#portfolio ul.thumbs li.misc a { background: url("../../img/works/misc/thumb.jpg") 0 0 no-repeat; }  	#portfolio ul.thumbs li.beapanda a:hover, 	#portfolio ul.thumbs li.hpbertram a:hover, 	#portfolio ul.thumbs li.einspruch a:hover, 	#portfolio ul.thumbs li.newcomer a:hover, 	#portfolio ul.thumbs li.abschlusspruefung a:hover, 	#portfolio ul.thumbs li.logos a:hover, 	#portfolio ul.thumbs li.websites a:hover, 	#portfolio ul.thumbs li.misc a:hover { background-position: 0 -120px; }

Also das ist der Bereich in dem das Hintergrundbildangepasst wird, dazu wird die Animation soweit ich das heraussehen konnte auch per CSS gemacht, im Bereich:

	#portfolio ul.thumbs li a { 		width: 750px; 		height: 120px; 		text-indent: -197666px; 		display: block; 		-webkit-transition: all 0.35s; 		-moz-transition: all 0.35s; 	}

Wird dann eine Animation ausgeführt, musst du mal so teste, dürfte so funktionieren, schlagt mich wenns ned stimmt, aber müsste so passen.

mfg Waegi

 

[invisiblekilla]

AW: RollOver Scroll Over Effekt

Danke dir.

Lach mich nicht aus aber, wo pack ich den Code rein?
Das erste in ne CSS?
Und den 2ten Teil in meinen Body der html Seite?

 

[invisiblekilla]

AW: RollOver Scroll Over Effekt

Habs hinbekommen
Nochmals Danke.

 

[Waegi]

AW: RollOver Scroll Over Effekt

Kein Problem, hast hoffentlich beides in den CSS-Code eingefügt.