Picture hover zoom effect

[intered15]

Goedemiddag,

Voor me afbeelding heb ik een hover zoom effect ingebouwd. Dat werkt in principe goed, als ik met de muis over de afbeelding heen ga, zoomt de afbeelding in. Echter wordt de afbeelding ook groter, en raakt de afbeelding dus uit zijn box. Dat is niet de bedoeling, de foto moet alleen inzoomen en niet groter worden.
Ik kan helaas niet de link laten zien naar hoe het eruit ziet, dat zit achter een afgeschermd gedeelte. Maar ik heb de volgende code gebruikt:

code:

.mg-image img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -o-transition: all 1s ease; /* IE 9 */
    -ms-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
        max-width: 100%;
}
.mg-image:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

[ Voor 5% gewijzigd door intered15 op 13-02-2015 16:54 ]

[lemnis]

overflow: hidden; doet de magie.

http://codepen.io/lemnis/pen/YPeZZo

[intered15]

bah, zo simpel

Maar bedankt voor je reactie! /bow

[ Voor 2% gewijzigd door intered15 op 13-02-2015 16:49 . Reden: spelfout ]

[n8n]

intered15 schreef op vrijdag 13 februari 2015 @ 16:42:
Goedemiddag,

de foto moet alleen inzoomen en niet groter worden

wat

[RobIII]

intered15 schreef op vrijdag 13 februari 2015 @ 16:42:
Ik kan helaas niet de link laten zien naar hoe het eruit ziet

Daar hebben ze jsfiddle voor uitgevonden (Overigens codepen.io is er ook één inderdaad)

Een testcase heb je doorgaans in een paar minuten gemaakt; zoals deze: http://jsfiddle.net/p1c7pv1k/

n8n schreef op vrijdag 13 februari 2015 @ 17:00:
[...]

wat

Voor -> Na

[ Voor 15% gewijzigd door RobIII op 13-02-2015 17:49 ]

[n8n]

RobIII schreef op vrijdag 13 februari 2015 @ 17:46:
[...]

Daar hebben ze jsfiddle voor uitgevonden (Overigens codepen.io is er ook één inderdaad)

Een testcase heb je doorgaans in een paar minuten gemaakt; zoals deze: http://jsfiddle.net/p1c7pv1k/


[...]


Voor -> Na

Ach zo, ik pak dan een background-image. Rendert ook sneller

[n8n]

Toch nog even mee gespeeld: img-tag, zelfde weergave als background-image: cover;. De scale transform heb ik al toegepast voor het hover effect, anders gebeurde het soms dat de afmetingen van opvolgende elementen veranderen wat de DOM-flow kon breken. 125% * 0.8 = 1 dus voorgaand aan de hover is de afbeelding 100%.

http://f.cl.ly/items/150L2K1r1A2M3Y0B0y44/index.html

[Spinal]

Als je nou ipv

code:

-webkit-transform

(ook) de prefix-vrije variant gebruikt, dan werkt het ook in IE en Firefox

[n8n]

Spinal schreef op woensdag 18 februari 2015 @ 15:12:
Als je nou ipv

code:

-webkit-transform

(ook) de prefix-vrije variant gebruikt, dan werkt het ook in IE en Firefox

Klopt. Normaal rol ik auto-prefixer maar dit was toch niet live bedoeld en ik ‘schets’ altijd in safari.

[Anoniem: 16328]

n8n schreef op woensdag 18 februari 2015 @ 23:22:
[...]

Klopt. Normaal rol ik auto-prefixer maar dit was toch niet live bedoeld en ik ‘schets’ altijd in safari.

Is het voordeel van jouw methode dat de afbeelding scherp blijft omdat de vergroting uitkomt op 100% van het bestand in plaats van 125% zoals RobIII in zijn JSFiddle laat zien?

[n8n]

Anoniem: 16328 schreef op dinsdag 03 maart 2015 @ 19:39:
[...]

Is het voordeel van jouw methode dat de afbeelding scherp blijft omdat de vergroting uitkomt op 100% van het bestand in plaats van 125% zoals RobIII in zijn JSFiddle laat zien?

Het is sowieso handig de afbeelding minimaal op de ingezoomde afmetingen af te stemmen en dat kan met beide manieren.

Wanneer de container 300px breed is doe je 300 * 1,2 = 360 pixels voor de afbeelding, keer 2 omdat hdpi = 720px. Overigens zal je dan ook wel wegkomen met een 600px afbeelding, je verliest sowieso wat scherpte met schalen. Door het simpelweg keer 2 te doen ben je wat flexibeler wanneer je besluit de zoom aan te passen of helemaal er uit te slopen.

[ Voor 29% gewijzigd door n8n op 03-03-2015 20:08 ]