¿Qué pasa con el uso de la propiedad de CSS3 transform y el uso de la scale que proporciona un efecto de zoom, esto se puede hacer así,

HTML

CSS

 .thumbnail { width: 320px; height: 240px; } .image { width: 100%; height: 100%; } .image img { -webkit-transition: all 1s ease; /* Safari and Chrome */ -moz-transition: all 1s ease; /* Firefox */ -ms-transition: all 1s ease; /* IE 9 */ -o-transition: all 1s ease; /* Opera */ transition: all 1s ease; } .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); } 

Aquí hay un violín de demostración. Eliminé parte del elemento para hacerlo más simple, siempre puedes agregar el desbordamiento oculto a la .image para ocultar el desbordamiento de la imagen escalada.

zoom propiedad zoom solo funciona en IE

Aqui tienes.

Manifestación

http://jsfiddle.net/27Syr/4/

HTML

 
 
 
 
Yay!
 
    
 
 
 
Yay!
 
    
 
 
 
Yay!
 
    
 
 
 
Yay!
 
    
  

CSS

 #menu { text-align: center; } .fader { /* Giving equal sizes to each element */ width: 250px; height: 375px; /* Positioning elements in lines */ display: inline-block; /* This is necessary for position:absolute to work as desired */ position: relative; /* Preventing zoomed images to grow outside their elements */ overflow: hidden; } .fader img { /* Stretching the images to fill whole elements */ width: 100%; height: 100%; /* Preventing blank space below the image */ line-height: 0; /* A one-second transition was to disturbing for me */ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .fader img:hover { /* Making images appear bigger and transparent on mouseover */ opacity: 0.5; width: 120%; height: 120%; } .fader .text { /* Placing text behind images */ z-index: -10; /* Positioning text top-left conrner in the middle of elements */ position: absolute; top: 50%; left: 50%; } .fader .text p { /* Positioning text contents 50% left and top relative to text container's top left corner */ margin-top: -50%; margin-left: -50%; } 

Sugerencia

En lugar de .fader { inline-block; } .fader { inline-block; } considere usar algún sistema de grillas. Según su tecnología de preferencia, puede ir a Foundation , Susy , Masonry o sus alternativas.

 .aku { transition: all .2s ease-in-out; } .aku:hover { transform: scale(1.1); } 

Me gusta usar una imagen de fondo. Me resulta más fácil y más flexible:

MANIFESTACIÓN

CSS:

 #menu { max-width: 1200px; text-align: center; margin: auto; } .zoomimg { display: inline-block; width: 250px; height: 375px; padding: 0px 5px 0px 5px; background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; transition: all .5s ease; } .zoomimg:hover { cursor: pointer; background-size: 150% 150%; } .blog { background-image: url(http://s18.postimg.org/il7hbk7i1/image.png); } .music { background-image: url(http://s18.postimg.org/4st2fxgqh/image.png); } .projects { background-image: url(http://s18.postimg.org/sxtrxn115/image.png); } .bio { background-image: url(http://s18.postimg.org/5xn4lb37d/image.png); } 

HTML:

DEMO 2 con superposición

Simplemente:

 .grow { transition: all .2s ease-in-out; } 

Esto permitirá que el elemento asigne una animación a través de css.

 .grow:hover { transform: scale(1.1); } 

¡Esto lo hará crecer!

 .item:hover img { -moz-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); } 

De esta forma, puedes hacer zoom en cualquier imagen con animación simple. Si necesita un tutorial completo aquí hay un tutorial oficial: http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php

SOLUCIÓN 1: puede descargar zoom-master .
SOLUCIÓN 2: ve a aquí .
SOLUCIÓN 3: tus propios códigos

 .hover-zoom { -moz-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s } .hover-zoom:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.5) } 

  -webkit-transition: all 1s ease; /* Safari and Chrome */ -moz-transition: all 1s ease; /* Firefox */ -ms-transition: all 1s ease; /* IE 9 */ -o-transition: all 1s ease; /* Opera */ transition: all 1s ease; 

solo quiero hacer una nota sobre las transiciones anteriores solo necesito

  -webkit-transition: all 1s ease; /* Safari and Chrome */ transition: all 1s ease; 

y -m- ciertamente doenst trabajo para IE 9 no sé de dónde sacaste esa idea.

css:

 .item img { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } .item img:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } 

Agregue la biblioteca jQuery JavaScript junto con jquery.zbox.css y jquery.zbox.js a su página web.

Agregue un grupo de miniaturas con enlaces que apuntan a las imágenes de tamaño completo en la página web.

Llame a la función en documento listo. Eso es.

En la fuente de vista, haga lo siguiente:

 $(".zb").zbox();