mouse hoover zoom effekt für bilder

grüße euch


habe eine frage u zwar brauche ich die programierungsbefehle für meine homepage für html u css für einen effekt für bilder. u zwar in dem ich mit der maus auf ein bild gehe u dieses dann größer wird nach meinem belieben

kann mir da jemand helfen?

ich suche schon seit tagen nun im internet nach den befehlen für html u konnte nichts aufschlussreiches finden

gruß george

@georgerus
Also mit CSS, kannst du scale auf die Klasse legen - der wert des scale ist mal die Große
also scale(2) = verdopplung der größe

@RobbyRobbe

ok also brauch ich dann im html garnichts mehr zu machen?

u wie schreib ich das genau im css? zu dem entsprechenden bild

@georgerus
So - bissl geschustert - aber denke das es um einiges einfacher geht - ist aber so spät

Das muss in die HTML:
[objerror]Bild nicht mehr verfügbar ((hier bild url))[/objerror]


Und das CSS:
<style> #pic img{top:200px;left:-200px;position: relative; transform: scale(20); -webkit-transform: scale(20); -moz-transform: scale(20); -o-transform: scale(20); -ms-transform: scale(20); } #pic img:hover{top:200px;left:-200px;position: relative; transform: scale(20); -webkit-transform: scale(20); -moz-transform: scale(20); -o-transform: scale(20); -ms-transform: scale(20); } </style>

Aber ich würde davon abraten :D

@RobbyRobbe
danke erstmal. das muss ich auch erst mal morgen genauer ansehen.heute geht das nimmer:)

u wieso würdest mir abraten davon?

@georgerus
Fuuu das Scale im noralen 1 und beim anderen z.B. 2 und nicht 20 :D

Btw. schon so spät :mozart:

@RobbyRobbe
ja reden wir morgen weiter ok

ich komm grad nicht mit:)

Möchtest du, dass das große Bild plötzlich aufploppt, wenn man mit der Maus darüber fährt oder soll es ein stufenweises, flüssiges größer werden sein?

@Bodo

hi letzteres:)

https://www.google.de/search?hl=de&site=imghp&tbm=isch&source=hp&biw=1366&bih=665&q=linoldruck&oq=linoldruck&gs_l=img.3..0l10.593.3161.0.3430.10.6.0.4.4.0.298.1385.1j0j5.6.0....0...1ac.1.22.img..1.9.1160.MBejiQVSUJk
so ungefähr...aber das bild sollte dann ich einstellen können wie groß das dann ist

@georgerus
Ok, hab sowas heute in der Firma gefunden. Kanns dir morgen schicken :)

@Bodo
oja wäre nett danke im voraus:)

@georgerus
Soooooooooooo! Habs testweise auf meinem Profil mal reingestellt. Sorry für das image, hab nach bild gegoogelt :D

Der Teil gehört ins style-Tag:
.zoom { width: 25%; -webkit-transition: width 1.4s ease-in-out; -moz-transition: width 1.4s ease-in-out; -o-transition: width 1.4s ease-in-out; transition: width 1.4s ease-in-out; } .zoom:hover { width: 100% !important; }
Dieser ins body-Tag:


Das wars eigentlich :)

@Bodo

u oben ist fürs css?

u width 25% da kann ich auch weniger od mehr % einstellen?

u unten bei alt="" zwischen diese "" kommt nix rein od?

@georgerus
Ja, oben ist der Code für css.

Natürlich: der %-Wert gibt die Größe des Fotos an, wenn man nicht mit der Maus darüber ist. Mehr als 100% lässt das Bild bei einem Mouse Over schrumpfen. Einfach mal ausprobieren :)

Das alt steht für einen alternativen Text, wenn das Foto nicht angezeigt werden kann. Da kannst du alles reinschreiben, was du willst. Natürlich klug, wenn man etwas sinnvolles einträgt :)

@Bodo

ok verstehe:) danke dir. ich werd das denk ich erstmal austesten, u dann mal sehen was so passiert. u dann wenn ich es gecheckt habe kommts in meine homepage

bei fragen meld ich mich nochmal

@georgerus
Ja, kein Problem :)

@Bodo
so ich habs jetzt mal probiert u die bilder sind alle weg?

was mach ich falsch

@georgerus

Schick mir deinen Profilcode bitte per PN. Ich gucks mir an.