Iniciar sesión
Crear cuenta
Crear cuentaCrear cuenta(30)(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)
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:
<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="'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>
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 -->
<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 -->
me ha solucionado el problema de forma elegante
Muchas gracias