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:
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 ;)
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
0
