¿Cómo crear un efecto de zoom en una imagen al desplazarse con CSS?

Actualmente estoy intentando crear un efecto de zoom al pasar el mouse sobre una de mis cuatro imágenes. El problema es que la mayoría de los ejemplos suelen usar tablas o divs de máscara para aplicar algún tipo de efecto.

Aquí hay un ejemplo que implementa lo que me gustaría.

Este es mi código hasta ahora.

HTML

 

CSS

 #menu { max-width: 1200px; text-align: center; margin: auto; } #menu img { width: 250px; height: 375px; padding: 0px 5px 0px 5px; overflow: hidden; } .blog { height: 375px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .blog:hover { cursor: pointer; height:475px; width: 350px; } .music { height: 375px; } .projects { height: 375px; } .bio { height: 375px; } 

¿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

 
Some awesome text

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

  

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.

  .img-wrap:hover img { transform: scale(0.8); } .img-wrap img { display: block; transition: all 0.3s ease 0s; width: 100%; } 
  
// Your image
  
pepsi pepsi

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); } 
 @import url('https://fonts.googleapis.com/css?family=Muli:200,300,400,700&subset=latin-ext'); body{ font-family: 'Muli', sans-serif; color:white;} #lists { width: 350px; height: 460px; overflow: hidden; background-color:#222222; padding:0px; float:left; margin: 10px; } .listimg { width: 100%; height: 220px; overflow: hidden; float: left; } #lists .listimg img { width: 350px; height: 220px; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } #lists:hover{cursor: pointer;} #lists:hover > .listimg img { -moz-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); -webkit-filter: blur(5px); filter: blur(5px); } #lists h1{margin:20px; display:inline-block; margin-bottom:0px; } #lists p{margin:20px;} .listdetail{ text-align:right; font-weight:200; padding-top:6px;padding-bottom:6px;} 
 

Eyes Lorem Impsum Samet

Impsum Samet Lorem

Click for More Details...

Two Frogs Lorem Impsum Samet

Impsum Samet Lorem

More Details...

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();