Código de CSS - Efecto de zoom en una imagen y texto con CSS3

Imágen de perfil
Val: 639
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Efecto de zoom en una imagen y texto con CSS3gráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(30)
Publicado el 18 de Enero del 2013 por Xavi
112.072 visualizaciones desde el 18 de Enero del 2013
Código que muestra como generar un efecto de zoom sobre una imagen y texto al pasar el ratón por encima.

Versión 1
estrellaestrellaestrellaestrellaestrella(30)

Publicado el 18 de Enero del 2013gráfica de visualizaciones de la versión: Versión 1
112.074 visualizaciones desde el 18 de Enero del 2013
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
<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>
<h2>Efecto zoom</h2>
<div style='text-align:center;'>
    <div class="zoom">Efecto de zoom con CSS3</div>
    <img class="zoom" src="http://www.lawebdelprogramador.com/logolwp100x25.jpg" />
</div>
</body>
</html>



Comentarios sobre la versión: Versión 1 (30)

Hernán
18 de Noviembre del 2014
estrellaestrellaestrellaestrellaestrella
Me sirvio mucho....gracias.... ;)
Responder
cristiano
22 de Noviembre del 2014
estrellaestrellaestrellaestrellaestrella
Exelente graciaaaaaaaaas
Responder
Jaime Santana
15 de Enero del 2015
estrellaestrellaestrellaestrellaestrella
El Mejor de todos los códigos que pude haber encontrado!!! sencillo y rápido de implentar.

muchas gracias!!! ..... en

para bajar el Zoom solo es necesario cambiar el 2 a 1.2 o al que estimen conveniente.. .saludoos.
Responder
Gustavo Lopez M.
9 de Diciembre del 2019
estrellaestrellaestrellaestrellaestrella
Excelente pero NO me resulta el cambiar 2 por 1,5 (75%). La imagen aparece distorsionada.
ME PODRÍAS AYUDAR POR FAVOR?
Responder
jose gregorio
29 de Abril del 2015
estrellaestrellaestrellaestrellaestrella
buen dia amigo, primero que nada tremendo aporto que hiciste muchas gracias, pero si esta a un lado de la pantalla la imagen no se visualiza completo, se tapa, o si la resolucion es baja, como hago para que el zomm sea hacia el centro?
Responder
davidosuna
15 de Mayo del 2015
estrellaestrellaestrellaestrellaestrella
Jose Gregorio, yo agregaría al elemento que quieres hacer zoom la propiedad lo siguiente:

#idElemento {transition: all 1s ease;} /*con sus prefijos*/

#idElemento:hover{right:5em;} /*si lo quieres desplazar a la izquierda*/
Responder
Lugo
7 de Diciembre del 2015
estrellaestrellaestrellaestrellaestrella
Donde coloco este código? o que onda? Help me
Responder
Imágen de perfil
4 de Noviembre del 2016
estrellaestrellaestrellaestrellaestrella
Hola Lugo, simplemente tienes que crear una pagina con extensión .html y abrirla en un navegador web.
Responder
Imágen de perfil
18 de Enero del 2016
estrellaestrellaestrellaestrellaestrella
Muchas Gracias por vuestro Trabajo ;))

Me ha servido, pero me gustaría incluir dos líneas de texto en el lateral de la imagen (los números) sin utilizar 'float' en nuestra página web > http://webart.es/sobre-nosotros/servicios-incluidos-gratis-al-crear-tu-pagina-web-blog-tienda-online

¿Alguien sabe cómo podría hacerlo?

Un saludo desde Barcelona
Responder
alex
22 de Enero del 2016
estrellaestrellaestrellaestrellaestrella
Excelente
Responder
Joseph Hammerer
29 de Febrero del 2016
estrellaestrellaestrellaestrellaestrella
Hola amigo me ha servido mucho tu aporte, sin embargo yo no soy programador y pues me da un problema al previsualizar, al hacer el zoom, el efecto se come la mitad superior de la imagen, ya que esta esta pegada al margen superior del cuadro de imagen y no se como hacer para centrar la imagen en el cuadro, osea la logro centrar horizontalmente, pero no vertical, y creo que de hay la falla!

esto fue lo que hice:

<html>
<head>
<center>
<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>


<body>
<div style="&#39;text-align:center;'">
<img class="zoom" src="http://www.ikerg1972.com/wp-content/uploads/2015/01/face.png" height="300px" width="300px/" margin-up="-250px/">
</div>
</body></center></head>
</html>
Responder
Marcelo
11 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
Un poco tarde pero lo comento, el error esta en que la etiqueta </head> la estas poniendo al cerrar el body, o sea despues de </body> cuando en realidad debe ir antes de <body>.

Saludos
Responder
Ezio Zaid
31 de Marzo del 2016
estrellaestrellaestrellaestrellaestrella
Estimado, buen dia.
Mi consulta es para poder realizar este efecto en un listado de imágenes con un efecto Carousel del Boostrap...
Este es el código que tengo implementado en una web y que me muestra 4 graficas.
Mi consulta sería como puedo adaptar y que se muestre este efecto zoom en este código.

<!-- /Inicio del Campo para cargar los 3 gráficos de AVANCES DE PROYECTOS con el estilo Carrousel -->
<section width="100%">
<div class="tile-body" >

<?php
// Muestra la ubicación de las imágenes de los Gráficos
$directory = "Recursos/Graficos/";
if (!file_exists($directory))
{
echo (" <div class='item'><img src='fotos/VACIO/vacio.jpg' width='100%' height='100%' data-holder-rendered='true' id='imagencoor' name='imagencoor'></div>");
}
else
{
?>
<div id="carousel-example-generic3" class="carousel slide" data-ride="carousel" width="100%">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic3" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic3" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-generic3" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner" role="listbox" >
<?php
//get all image files with a .jpg extension.
$images = glob("" . $directory . "*.jpg");
$imgs = '';
// create array
foreach($images as $image){ $imgs[] = "$image"; }
//shuffle array
shuffle($imgs);
//select first 5 images in randomized array
$imgs = array_slice($imgs, 0, 5);
$conti = 0;
//display images
foreach ($imgs as $img) {
if ( $conti < 5 )
{
if ($conti == 0 )
{ echo " <div class='item active'><img src='$img' width='100%' height='100%' data-holder-rendered='true'> </div>";}
else
{ echo " <div class='item'><img src='$img' width='100%' height='100%' data-holder-rendered='true'></div>";}
}
else{};
$conti = $conti + 1 ;
}
?>
</div>
<a class="left carousel-control" href="#carousel-example-generic3" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic3" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<?php
}
?>
</div>
</section><!-- /Fin del Campo para cargar los 3 gráficos de AVANCES DE PROYECTOS con el estilo Carrousel -->
Responder
Calos
29 de Mayo del 2019
estrellaestrellaestrellaestrellaestrella
Lograstes descubrir como?
Responder
Leonardo
5 de Mayo del 2016
estrellaestrellaestrellaestrellaestrella
Cómo hago para que en un template para Joomla no se mueva la imagen de fondo cuando le altero el zoom al navegador? Agradezco que me ayuden. Gracias.
Responder
Ernesto
27 de Julio del 2016
estrellaestrellaestrellaestrellaestrella
Super Excelente!!
Responder
Aaron
10 de Septiembre del 2016
estrellaestrellaestrellaestrellaestrella
Gracias, me sirvio para una pag de hackathon
Responder
Ezequiel
3 de Noviembre del 2016
estrellaestrellaestrellaestrellaestrella
Gracias!!!!!!!!!
Responder
Andy
11 de Noviembre del 2016
estrellaestrellaestrellaestrellaestrella
Muchas Gracias por compartir su conocimiento. Facilita el aprendizaje para quienes estamos empezando.
Responder
Charly
15 de Noviembre del 2017
estrellaestrellaestrellaestrellaestrella
EXCELENTE!
Responder
Fabián
25 de Abril del 2018
estrellaestrellaestrellaestrellaestrella
Excelente aporte , muchas gracias
Responder
genial
4 de Mayo del 2018
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
21 de Agosto del 2018
estrellaestrellaestrellaestrellaestrella
Muy buen aporte, un código sencillo y que sin duda le da un toque elegante a la página web.
Responder
castro castro
30 de Octubre del 2018
estrellaestrellaestrellaestrellaestrella
hola exelete muchas gracias me ayudo mucho ! solo tengo una duda, tengo varias imagenes y cuando se hace zoom en una imagen queda por debajo de las demas como hago para que se sobreponga?
Responder
Carlos Javier Ruiz Cárcamo
4 de Diciembre del 2018
estrellaestrellaestrellaestrellaestrella
Se Agredece el aporte, estimado.-
Responder
Agusti
22 de Diciembre del 2018
estrellaestrellaestrellaestrellaestrella
muy buena
me ha solucionado el problema de forma elegante
Responder
José Manuel
21 de Enero del 2019
estrellaestrellaestrellaestrellaestrella
Muy bueno. Le encuentro mucha utiilidad.
Muchas gracias
Responder
Samuel
6 de Abril del 2019
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Bryant
28 de Junio del 2019
estrellaestrellaestrellaestrellaestrella
Buenísimo aporte Héroe sin capa!
Responder
2 de Diciembre del 2019
estrellaestrellaestrellaestrellaestrella
Amigos que tal, quisiera saber si se puede realizar el zoom al hacer clic en algún botón si tiene el código, pasenlo por favor
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2275