<!DOCTYPE html>
<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;
}
.zoom:hover{
/* tranformamos el elemento al pasar el mouse por encima al doble de
su tamaño con scale(2). */
transform : scale(2);
}
</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 (32)
muchas gracias!!! ..... en
para bajar el Zoom solo es necesario cambiar el 2 a 1.2 o al que estimen conveniente.. .saludoos.
ME PODRÍAS AYUDAR POR FAVOR?
#idElemento {transition: all 1s ease;} /*con sus prefijos*/
#idElemento:hover{right:5em;} /*si lo quieres desplazar a la izquierda*/
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
esto fue lo que hice:
/* Aumentamos la anchura y altura durante 2 segundos */
}
/* tranformamos el elemento al pasar el mouse por encima al doble de
su tamaño con scale(2). */
}
Saludos
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 -->
// Muestra la ubicación de las imágenes de los Gráficos
{
}
{
//get all image files with a .jpg extension.
// create array
//shuffle array
//select first 5 images in randomized array
$conti = 0;
//display images
{
}
}
}
me ha solucionado el problema de forma elegante
Muchas gracias