CSS - Efecto zoom centrado en la pantalla

 
Vista:

Efecto zoom centrado en la pantalla

Publicado por Gabriel (4 intervenciones) el 23/08/2017 07:03:17
Hola buenos dias:
Tengo el codigo mas abajo, pero me gustaria saber como lo modifico para que cuando haga el zoom la imagen no quede en un costado sino centrada en la pantalla.
Gracias por vuestra ayuda

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
28
29
30
31
32
33
<head>
<!-- Copiar dentro del tag HEAD -->
<style type="text/css">
#container {
width: 500px;
margin: 0 auto;
}
.ex2 img{
height: 140px;
width: 250px;
margin: 10px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.ex2 img:hover {
height: 600px;
width: 800px;
margin-left: -50px;
align-content:center;
}
</style>
</head>
</head>
 
<body>
<div id="container">
<div class="ex2" align="center">
<img src="thor/pongo_thor_tana.jpeg" width="250" height="140" alt=""/>
</div>
</div>
</body>
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 ScriptShow
Val: 571
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Efecto zoom centrado en la pantalla

Publicado por ScriptShow (125 intervenciones) el 23/08/2017 18:46:27
Saludos Gabriel,

A ver esta opción:

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
28
29
30
31
<!DOCTYPE html>
 
<html>
<head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
 
.ex2 img {
height: 140px;
width: 250px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
 
.ex2 img:hover {
height: 600px;
width: 800px;
}
</style>
</head>
<body>
<div class="ex2" align="center">
<img src="fondo.jpg" width="250" height="140" alt="" />
</div>
</body>
</html>

Espero sea útil.
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

Efecto zoom centrado en la pantalla

Publicado por Gabriel (4 intervenciones) el 24/08/2017 03:52:02
Hola ScriptShow:
Si esta mejor de esa manera, pero la imagen no emerge hacia el centro y si las fotos miniatura estan en el borde inferion de la pantalla, al ampliarla se va de pantalla y no emerge hacia el centro.
Habra alguna otra solucion?
Muchas gracias por su tiempo.
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
Imágen de perfil de kip
Val: 10
Ha aumentado su posición en 2 puestos en CSS (en relación al último mes)
Gráfica de CSS

Efecto zoom centrado en la pantalla

Publicado por kip (3 intervenciones) el 24/08/2017 04:53:24
Hola, intentalo con la propiedad transform, algo asi:

1
2
3
.ex2 img:hover {
    transform: scale(2);
}

El unico incoveniente en ese caso es que la imagen por su tamaño desaparece del documento, eso se soluciona añadiendo otra propiedad:

1
2
3
4
.ex2 img:hover {
    transform: scale(2);
    transform-origin: top;
}

Usa tambien los prefijos de los navegadores:

1
2
3
4
-moz-transform para Firefox
-webkit-transform para Chrome y Safari
-o-transform para Opera
-ms-transform para Internet Explorer 9

Pruebalo y nos cuentas.
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

Efecto zoom centrado en la pantalla

Publicado por Gabriel (4 intervenciones) el 24/08/2017 05:39:47
Gracias kip por su repuesta.
Le comento que sigue igual, a ver yo lo que quiero es que no se abra la imagen mas grande en la misma posicion, que se abra sobre las otras imagenesy se vea centrada.
Cuando se abre sobre la propia posicion, un pedazo de la imagen queda fuera de pantalla sobre todo en sistema android.
Muchas gracias por su tiempo
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

Efecto zoom centrado en la pantalla

Publicado por Gabriel (4 intervenciones) el 24/08/2017 16:34:49
Gracias ScriptShow por su respuesta.
Eso mismo es lo qu eestaba buscando.
Muchas gracias por la informacion
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