¿Creando un efecto de zoom en una imagen al pasar el mouse usando CSS?

87

Actualmente estoy tratando de 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 utilizar tablas o divs de máscara para aplicar algún tipo de efecto.

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

Este es mi código hasta ahora.

HTML

<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt="">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png" alt="">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt="">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png" alt="">
</div>

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;
}
html class css KingPolygon
fuente

Respuestas:

164

¿Qué pasa con el uso de la CSS3 transformpropiedad y el uso scaleque le dará un efecto de zoom? Esto se puede hacer así,

HTML

<div class="thumbnail">
    <div class="image">
        <img  src="http://placehold.it/320x240" alt="Some awesome text"/>
    </div>
</div>

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 puede agregar un desbordamiento oculto .imagepara ocultar el desbordamiento de la imagen escalada.

zoom la propiedad solo funciona en IE

Mitchell Layzell
fuente
14
Y al ganar el premio "lecciones de vida profundas del código", su CSS canta "Todo es facilidad, todo es facilidad".
Nerrolken
1
¿Cómo evitarías la pixelación?
Waltari
1
@Waltari, el tamaño de la imagen debe ser un 25% (la cantidad que estamos ampliando) más grande que el área de contenido, por lo que si la miniatura es de 320x240 y estamos ampliando un 25%, la imagen debe ser de 400x300.
Mitchell Layzell
25

Aqui tienes.

Manifestación

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

HTML

<div id="menu">

    <div class="fader">
        <div class="text">
            <p>Yay!</p>
        </div>
        <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
            <img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt="">
        </a>
    </div>

    <div class="fader">
        <div class="text">
            <p>Yay!</p>
        </div>
        <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
            <img class ="blog" src="http://s18.postimg.org/4st2fxgqh/image.png" alt="">
        </a>
    </div>

    <div class="fader">
        <div class="text">
            <p>Yay!</p>
        </div>
        <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
            <img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt="">
        </a>
    </div>

    <div class="fader">
        <div class="text">
            <p>Yay!</p>
        </div>
        <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
            <img class ="blog" src="http://s18.postimg.org/5xn4lb37d/image.png" alt="">
        </a>
    </div>

</div>

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; }considerar el uso de algún sistema de cuadrícula. Según su tecnología de preferencia, puede optar por Foundation , Susy , Masonry o sus alternativas.

Andrey Mikhaylov - lolmaus
fuente
19 
.aku { 
    transition: all .2s ease-in-out; 
}

.aku:hover {
    transform: scale(1.1); 
}
Akhil P
fuente
16

Me gusta usar una imagen de fondo. Lo encuentro más fácil y 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:

<div id="menu">
    <div class="blog zoomimg"></div>
    <div class="music zoomimg"></div>
    <div class="projects zoomimg"></div>
    <div class="bio zoomimg"></div>
</div>

DEMO 2 con superposición

jme11
fuente
No recomendaría usar una imagen de fondo para esto, perderá todo el increíble SEO relacionado con la imagen que viene con el uso de una etiqueta de imagen y atributos alt.
Mitchell Layzell
Creo que esto es genial, pero pierdes toda la utilidad de la etiqueta img.
Daniel Naab
Si la imagen no es relevante para SEO, encontré esta solución más limpia.
NLemay
7

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!

miksiii
fuente
3

SOLUCIÓN 1: Puede descargar zoom-master .
SOLUCIÓN 2: Vaya 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)
 }
<img class="hover-zoom"  src="https://i.stack.imgur.com/ewRqh.jpg" 
     width="100px"/>
Expandir fragmento


Vergüenza
fuente
0 
 -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 tomar nota de las transiciones anteriores solo necesito

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

y -ms- ciertamente no funciona para IE 9. No sé de dónde sacaste esa idea.

DCdaz
fuente
IE10 (la primera versión estable de IE que admite la transición) no requiere el prefijo -ms-, las compilaciones inestables anteriores sí lo hacen y lo mismo ocurre con -moz- y -o-, las versiones actuales no lo requieren, pero las compilaciones anteriores sí.
Mitchell Layzell
-ms- no es completamente necesario ya que no ofrece una solución para que ninguno de los navegadores IE haga que la transición funcione. Usas el prefijo para que la regla específica funcione, no solo los utilizas por diversión.
DCdaz
-MS- es un proveedor prefijo que cayeron sobre la liberación de IE 10, es decir, las versiones anteriores como IE 9 seguir utilizando el prefijo vendedor, muchas personas utilizan tristemente IE 9 para el día de hoy, ahora, cuando se trata de la transitionpropiedad IE trajo oficialmente transitionen IE 10, por lo que no lo requiere, sin embargo, si desea estar al 100%, hay versiones de IE 9 que son inestables -ms-transition.
Mitchell Layzell
1
Esas transiciones falsas no funcionan en IE9 con el prefijo de proveedor. -ms- es un prefijo completamente inútil para las transiciones.
DCdaz
1
¿Ves -ms- en cualquier lugar también -o- en el móvil de Opera en realidad no hace que las transiciones funcionen, por lo que es inútil y -moz- para los lanzamientos rápidos sucesivos de 2011 no tiene sentido porque literalmente estás hablando de un pequeño puñado de usuarios que El 100% serán desarrolladores e instituciones que no utilicen la web como usuario general, sino para fines de plataforma. Pero aún queda el argumento principal -ms- es totalmente inútil y no se requiere en lo más mínimo. no hay necesidad de -moz- o -o- Y no hay 100% de necesidad de -ms-
DCdaz
0 

    .img-wrap:hover img {
        transform: scale(0.8);
    }
    .img-wrap img {
        display: block;
        transition: all 0.3s ease 0s;
        width: 100%;
    }
    <div class="img-wrap">
    <img src="http://www.sampleimages/images.jpg"/> // Your image
    </div>
Expandir fragmento

Este código es solo para el efecto de alejamiento. Configure el div "img-wrap" de acuerdo con sus estilos e inserte el efecto de alejamiento de los resultados del estilo anterior. Para el efecto de acercamiento, debe aumentar el valor de escala (por ejemplo: en, use transform: scale (1.3);

Sreenath
fuente
0 
  <div class="item">
  <img src="yamahdi1.jpg" alt="pepsi" width="50" height="58">
  <img src="yamahdi.jpg" alt="pepsi" width="50" height="58">
  <div class="item-overlay top"></div>

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);
}
سیدرسول میرعظیمی
fuente
0 

@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;}
<div id="lists">
<div class="listimg">
  <img src="https://lh3.googleusercontent.com/WeEw5I-wk2UO-y0u3Wsv8MxprCJjxTyTzvwdEc9pcdTsZVj_yK5thdtXNDKoZcUOHlegFhx7=w1920-h914-rw">
</div>
<div class="listtext">
<h1>Eyes Lorem Impsum Samet</h1>
<p>Impsum Samet Lorem</p>
</div>
<div class="listdetail">
<p>Click for More Details...</p>
</div>
</div>

<div id="lists">
<div class="listimg">
  <img src="https://lh4.googleusercontent.com/fqK7aQ7auobK_NyXRYCsL9SOpVj6SoYqVlgbOENw6IqQvEWzym_3988798NlkGDzu0MWnR-7nxIhj7g=w1920-h870-rw">
</div>
<div class="listtext">
<h1>Two Frogs Lorem Impsum Samet</h1>
<p>Impsum Samet Lorem</p>
</div>
<div class="listdetail">
<p>More Details...</p>
</div>
</div>
Expandir fragmento

Murat Kezli
fuente
0 
<!DOCTYPE html>
<html>
<head>
<style>
.zoom {

  overflow: hidden;
}

.zoom img {
  transition: transform .5s ease;
}
.zoom:hover img {
  transform: scale(1.5);
}

</style>
</head>
<body>

<h1>Image Zoom On Hover</h1>
<div class="zoom">
  <img src="/image-path-url" alt="">
</div>

</body>
</html>
Mohidul
fuente
Agrega alguna explicación para eliminar tu respuesta de una publicación de baja calidad.
Harsha Biyani
-3

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

<link rel="stylesheet" href="jquery.zbox.css">
<script src="jquery.min.js"></script>
<script src="jquery.zbox.min.js"></script>

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

<a class="zb" rel="group" href="1.png" title="Image 1">
  <img src="thumb1.png">
</a>
<a class="zb" rel="group" href="2.png" title="Image 2">
  <img src="thumb2.png">
</a>
<a class="zb" rel="group" href="3.png" title="Image 3">
 <img src="thumb3.png">
</a>

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

En la fuente de la vista haga:

$(".zb").zbox();
Giri
fuente
2
OP pidió una forma de hacer esto en CSS. Una respuesta de jQuery no es útil aquí.
TylerH