Yay!
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.
#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
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.
#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%; }
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:
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:
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
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();