Bilder vergrößern mit hover

[1A_Photoshop]

Ich habe vier kleine Bildansichten nebeneinander in einer Reihe auf meine Webseite.
Wenn ich über ein Bild fahre bekomme ich das Große zusehen.

div.imageHold {
  padding: 55px 5px; /* damit der container die höhe des großen bildes annimmt */
  /* andere formatierung, z.B. zentrieren/etc: */
  /* .... */
}

div.imageHold div {
  float: left;
  width: 230px;
  height: 150px;
  /* ab hier kann man die abstände
  und sonstiges der bilder eintragen */
  margin-left: 5px;
}

div.imageHold img {
  width: 230px;  /* wir skalieren das große bild auf die kleine größe */
  height: 150px; /* um verpixelung beim vergößern zu verhindern       */
}

div.imageHold img:hover {
  position: absolute;
  margin-left: -85px; /* die hälfte des größenunterschiedes der bilder */
  margin-top: -55px;  /* hier genau so */
  width: 400px;       /* die weite beim vergrößern */
  height: 314px;      /* die höhe beim vergrößern */
}

Mein Problem:
Die Bilder sind sehr unterschiedlich in Größe und Seitenverhältnis, die bekomme ich auch nicht vernünftig zusammen geschnitten.

Bei meinem Script bekommen die Bilder alle beim Vergrößern 400x314 Pixel.
Natürlich kann ich div.imageHold img:hover vier mal verschieden anlegen, aber ich suche eher nach einer flexiblen Lösung.
Gibt es ein Hoverscript was auch unterschiedliche Bildgrößen darstellen kann, sprich flexibler ist?

 

[hub]

AW: Bilder vergrößern mit hover

Moin moin,
gib dann entweder nur jeweils die Höhe oder nur die Breite an, eben das, was für dich relevant ist. Die Bilder werden dann im richtigen Seitenverhältnis angezeigt.

Gruß Ulli

**edit: aber sie werden nicht richtig zentriert. Da fällt mir dann nur eine Lösung mit Javascript /jQuery ein ...

 

[1A_Photoshop]

AW: Bilder vergrößern mit hover

Dank dir hup, daran habe ich auch bereits gedacht.
Aber ich dachte es geht halt noch flexibler, da die Bilder (vom Auftraggeber) mal Hochkant mal Querformat haben und sehr unterschiedlich sind.

 

[hub]

AW: Bilder vergrößern mit hover

Moin,
das Problem habe ich auch schon gehabt und mit jQuery gelöst, das hat den Vorteil, das es so gut wie auf jedem Browser läuft und Javascript nicht abgeklemmt ist.
Ich kann, wenn du willst, morgen schauen, ob ich den Code noch habe - oder du schaust mal bei jquery.com vorbei. Plugins haben zwar meist ein wenig Ballast um es jeden Recht zu machen, aber sie sparen Arbeit.

Gruß Ulli

 

[1A_Photoshop]

AW: Bilder vergrößern mit hover

hub, vielen Dank.
Ja das Script würde mich interessieren. Muss allerdings morgen schon abgeben.
Aber vielleicht kann ich es noch nachträglich einarbeiten.
Allerdings kenne ich mich mit jQuery noch gar nicht aus. Aber ich lerne gerne dazu.

 

[hub]

AW: Bilder vergrößern mit hover

Moin,
dein Termin ist ganz schön eng .
Wenn du dich nicht mit jquery auskennst, wird es schwer. Eine schnelle Lösung wäre, du arbeitest mit jeweils 2 Bildern. Eins für normal und eins für das Hover.
Ich habe gefunden, was ich gesucht hatte, es entspricht nicht so ganz deinen Anforderungen.
Lösungsansätez für meinen Vorschlag kannst du aber hier finden (klick oder ).
Aber vielleicht findet sich hier noch jemand vorher mit einer konkreten, fertigen Lösung.

Gruß Ulli

 

[kleeaar]

AW: Bilder vergrößern mit hover

also eine möglichkeit wäre, nicht mit bildern, also <img>, sondern mit divs und hintergrundbildern zu arbeiten.
da kann man ja mittels Css und dem befehl background-size arbeiten und hat mehr möglichkeiten bilder an einen festen container anzupassen.
http://www.w3schools.com/cssref/css3_pr_background-size.asp

Grüße

 

[1A_Photoshop]

AW: Bilder vergrößern mit hover

hub, dank dir für die tollen Lösungsansätze, sind sehr interessant.
Für mein Projekt löse ich das erst einmal nur mit css.

 

[1A_Photoshop]

AW: Bilder vergrößern mit hover

also eine möglichkeit wäre, nicht mit bildern, also <img>, sondern mit divs und hintergrundbildern zu arbeiten.
da kann man ja mittels Css und dem befehl background-size arbeiten und hat mehr möglichkeiten bilder an einen festen container anzupassen.
http://www.w3schools.com/cssref/css3_pr_background-size.asp

Grüße

Vielen Dank kleeaar,
steh gerade ein wenig auf dem Schlauch und versteh den Ansatz nicht, warum backgroundbilder?

 

[kleeaar]

AW: Bilder vergrößern mit hover

hab dir mal ein Beispiel geschrieben:
http://jsfiddle.net/w4qYQ/1/
damit sollte klarer werden, was ich meine.

Sogar mit netter Animation basierend auf CSS3:
http://jsfiddle.net/w4qYQ/3/

grüße

 

[1A_Photoshop]

AW: Bilder vergrößern mit hover

hab dir mal ein Beispiel geschrieben:
http://jsfiddle.net/w4qYQ/1/
damit sollte klarer werden, was ich meine.

Sogar mit netter Animation basierend auf CSS3:
http://jsfiddle.net/w4qYQ/3/

grüße

Wow kleeaar, vielen Dank da wäre ich nicht drauf gekommen.
Jetzt muss ich die Bilder nur noch alle in eine Zeile bekommen, da rätsle ich noch herum. Denn sind die fünf Bilder in einer Reihe hab ich mitunter so ein seltsames Zittern auf dem Bildschirm.
Aber das Script ist schon genial.

 

[1A_Photoshop]

AW: Bilder vergrößern mit hover

Also in eine Tabellenzeile funktioniert nicht. Da schiebt es immer die anderen nur nach rechts weiter. kleeaar hast du eine Idee, wie ich die fünf div-contianer in eine Reihe bekomme ohne das sie sich weg schieben?

 

[kleeaar]

AW: Bilder vergrößern mit hover

Also in eine Tabellenzeile funktioniert nicht. Da schiebt es immer die anderen nur nach rechts weiter. kleeaar hast du eine Idee, wie ich die fünf div-contianer in eine Reihe bekomme ohne das sie sich weg schieben?

das wirst du wohl nur hinbekommen, wenn du sie absolut platzierst.
Denn nur dann sind sie vom restlichen Inhalt unabhängig.

Grüße

PS: willst du uns mal dein Projekt zeigen, sofern du es irgendwo hochgeladen hast?
Dann weiß man nämlich, um was es genau geht - das machte die ganze Sache durchsichtiger =)

 

[1A_Photoshop]

AW: Bilder vergrößern mit hover

das wirst du wohl nur hinbekommen, wenn du sie absolut platzierst.
Denn nur dann sind sie vom restlichen Inhalt unabhängig.

Grüße

PS: willst du uns mal dein Projekt zeigen, sofern du es irgendwo hochgeladen hast?
Dann weiß man nämlich, um was es genau geht - das machte die ganze Sache durchsichtiger =)

kleeaar, vielen Dank für deine Antwort.

.image_cont {
    display:inline-block; 
}

Habe erst einmal display:inline-block hinzugefügt. Das hilft ein bisschen. Jetzt sind die Bilder nebeneinander. Aber sie sprengen dann rechts das Layout. Hab erst einmal drei Bilder in eine Reihe und dann darunter noch mal zwei. Da wird das Design erstmal nicht zerkloppt.
Nächste Woche wird es online gehen. dann kann ich einen Link hier rein stellen. Dann verstehen es evtl. auch spätere Leser.
Eigentlich müßte man aus beiden Scripten das Beste nehmen. Ich habe bloß im Augenblick null Zeit. Aber es lohnt sich das mal später zu machen. So ganz ohne JavaScript ist das schon toll.

 

[kleeaar]

AW: Bilder vergrößern mit hover

also:
wenn du einen Container um deine Bilder nutzt dem du position:relative zuweist, kannst du innerhalb deises Containers die Elemente mit position:absolute relativ zu diesem Container platzieren.
jetzt, ist jedes Element an seinem festen platz, und wird sich nicht durch das Vergrößern der Bilder verschieben.

Biespiel:
http://jsfiddle.net/w4qYQ/4/
EDIT:
so werden die bilder mittig gezoomt:
http://jsfiddle.net/w4qYQ/6/


grüße

 

[1A_Photoshop]

AW: Bilder vergrößern mit hover

so werden die bilder mittig gezoomt:
http://jsfiddle.net/w4qYQ/6/
grüße

kleeaar. Super, super, super.
Das war es, es läuft flüssig und passt alles. Vielen, vielen Dank.
Nächste Woche gibt es den Link dazu.

Ich freue mich so.

Gruß Viktor

 

[kleeaar]

AW: Bilder vergrößern mit hover

gerngeschehen =)

grüße

 

[1A_Photoshop]

AW: Bilder vergrößern mit hover

@kleeaar,

so Seite ist online. Damit spätere Leser das verstehen was wir hier meinten, können sie sich das in der Praxis ansehen.
http://www.logopaedie-berlin-bettermann.de/hoerstoerungen.html

Danke noch mal kleeaar.