CSS - Zoom en imagen manteniendo el tamaño

   
Vista:

Zoom en imagen manteniendo el tamaño

Publicado por Carlos (1 intervención) el 18/07/2016 12:04:09
Buenos días,

Estoy intentando hacer que, al pasar el ratón por encima de una imagen, esta se amplíe y, gracias a este código que he encontrado por la red, lo he conseguido:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
<title>Efecto de zoom en una imagen y texto con CSS3</title>
<style type="text/css">
    .zoom{
        /* Aumentamos la anchura y altura durante 2 segundos */
        transition: width 2s, height 2s, transform 2s;
        -moz-transition: width 2s, height 2s, -moz-transform 2s;
        -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
        -o-transition: width 2s, height 2s,-o-transform 2s;
    }
    .zoom:hover{
        /* tranformamos el elemento al pasar el mouse por encima al doble de
           su tamaño con scale(2). */
        transform : scale(2);
        -moz-transform : scale(2);      /* Firefox */
        -webkit-transform : scale(2);   /* Chrome - Safari */
        -o-transform : scale(2);        /* Opera */
    }
</style>
</head>
<body>
<div>
    <img class="zoom" src="imagen.jpg" />
</div>
</body>
</html>

Sin embargo, el tamaño de la imagen también aumenta, cuando, en realidad, lo único que quiero es que se haga un zoom de la imagen pero que las medidas de la misma se mantengan, no sé si me estoy explicando bien.

Si alguien puede explicarme cómo se hace, se lo agradecería :)

Un saludo y gracias por vuestra atención ;)
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Zoom en imagen manteniendo el tamaño

Publicado por xve (350 intervenciones) el 18/07/2016 18:27:33
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar