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

Imágen de perfil

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


CSS

estrellaestrellaestrellaestrellaestrella(17)
Publicado el 18 de Enero del 2013 por Xavi
49.063 visualizaciones desde el 18 de Enero del 2013. Una media de 245 por semana
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(17)

Publicado el 18 de Enero del 2013gráfica de visualizaciones de la versión: Versión 1
49.064 visualizaciones desde el 18 de Enero del 2013. Una media de 245 por semana
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 (17)

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
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
07 de Diciembre del 2015
estrellaestrellaestrellaestrellaestrella
Donde coloco este código? o que onda? Help me
Responder
Imágen de perfil
Xavi
04 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
Crear Página Web | WebArt.es
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
Leonardo
05 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
03 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

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2275