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

Pos: 3

Val: 594

Ha mantenido su posición en CSS (en relación al último mes)

Efecto de zoom en una imagen y texto con CSS3

CSS

(32)

Actualizado el 8 de Diciembre del 2020 por Xavi (542 códigos) (Publicado el 18 de Enero del 2013)

126.418 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.

La misma versión permo haciendo zoom a los dos elementos a la vez: https://www.lawebdelprogramador.com/codigo/CSS/6759-Efecto-de-zoom-ha-varios-elementos-con-un-evento-hover-con-CSS3.html

Versión 1
(32)

Actualizado el 8 de Diciembre del 2020 (Publicado el 18 de Enero del 2013)

gráfica de visualizaciones de la versión: Versión 1

126.419 visualizaciones desde el 18 de Enero del 2013

<!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)

Hernán

18 de Noviembre del 2014

Me sirvio mucho....gracias.... ;)

Responder

cristiano

22 de Noviembre del 2014

Exelente graciaaaaaaaaas

Responder

Jaime Santana

15 de Enero del 2015

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

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

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

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

Donde coloco este código? o que onda? Help me

Responder

Xavi

4 de Noviembre del 2016

Hola Lugo, simplemente tienes que crear una pagina con extensión .html y abrirla en un navegador web.

Responder

Crear Página Web | WebArt.es

18 de Enero del 2016

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

Excelente

Responder

Joseph Hammerer

29 de Febrero del 2016

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

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

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

Lograstes descubrir como?

Responder

Leonardo

5 de Mayo del 2016

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

Super Excelente!!

Responder

Aaron

10 de Septiembre del 2016

Gracias, me sirvio para una pag de hackathon

Responder

Ezequiel

3 de Noviembre del 2016

Gracias!!!!!!!!!

Responder

Andy

11 de Noviembre del 2016

Muchas Gracias por compartir su conocimiento. Facilita el aprendizaje para quienes estamos empezando.

Responder

Charly

15 de Noviembre del 2017

EXCELENTE!

Responder

Fabián

25 de Abril del 2018

Excelente aporte , muchas gracias

Responder

genial

4 de Mayo del 2018

No ha dejado ningún comentario

Responder

Juan Diego

21 de Agosto del 2018

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

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

Se Agredece el aporte, estimado.-

Responder

Agusti

22 de Diciembre del 2018

muy buena
me ha solucionado el problema de forma elegante

Responder

José Manuel

21 de Enero del 2019

Muy bueno. Le encuentro mucha utiilidad.
Muchas gracias