CSS - hacer zoom a la foto al pasar mouse

   
Vista:

hacer zoom a la foto al pasar mouse

Publicado por leonardo leobeznec@gmail.com (1 intervención) el 11/02/2016 14:14:10
hola, hace años que deje de trabajar con webs pero ahora que retome algo, me cuesta mucho entender el codigo css o php.

tengo una web y quiero que al pasar el mouse haga un pequeño zoom y regrese al salir con el mouse.
vi algunos ejemplos pero no se ponerlos. no se si hayq ue crear mas archivos o como incluirlos en lo que tengo armado.

el ejemplo de lo que quiero hacer seria algo asi .
http://cuponesmdp.com/home
una vez que pongan que ya estan suscriptos, pasen con el mouse por arriba de las fotos y lo veran.

el home mio es asi:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?php
$cuerpo.="<div align='center'><table border='0' width='800' style='border-collapse: collapse'><tr><td valign='top' align='center'>";
 
        ///logeado, muestra funciones de logeado
        if($nombreus){
        include("logeado.php");
        }
 
 
       ///listado
        $abajo=0;
        $cuerpo.="<br><table border='0' width='800' style='border-collapse: collapse' class='tgrisclaro'><tr><td valign='top'><tr><td><font class='titulo'>&nbsp;NOVEDADES DEL DIA</td></tr><tr>";
 
        $check1 = mysql_query ("select * from cupones where home > 0 order by home asc limit 14",$link);
        while($row1=mysql_fetch_array($check1)){
 
        $id_cupo= $row1["id_cu"];
        $titulo = utf8_encode($row1["titulo"]);
        $descri = $row1["descripcion"];
        $foto = $row1["foto"];
 
 $cuerpo.="<td align='center'><table width='180' border='0' cellpadding='0' cellspacing='0' ><tr>
        <td  valign='middle'><a href='$acceso/cupon/$id_cupo-".urls($titulo)."'><div id='ex5'><img border='0' src='$acceso/cupones/$foto' width='450' height='400'></div></a>
        <div align='center'><table border='0' width='200' style='border-collapse: collapse'><tr><td width='200' colspan='2'><font class='botonform3'>$titulo</font></td></tr><tr>
        <td width='174' align='right'><font size='2'><i><a href='$acceso/cupon/$id_cupo-".urls($titulo)."'><img border='0' src='$acceso/css/images/bt_cupon.png'></a></td>
        </tr></table></div></td></tr></table></td>";
 
 
 
	   if($abajo==1){
		  $cuerpo.="</tr><tr><td colspan='3'>&nbsp;</td></tr><tr>";
		  $abajo=0;
		  }else{
		  $abajo++;
		  }
        }
        $cuerpo.="</td></tr></table>";
 
        //// fin listado    
        $cuerpo.="<br><div align='center'><table border='0' width='800' class='tmenu'><tr><td>&nbsp;<font class='titulo'>TUCUPONES MAS RECIENTES</font><br>
        <iframe src='masnuevos.php'  width='780' height='160' scrolling='no' frameborder='0' border='0'></iframe></td></tr></table></div>";
 
$cuerpo.="<br><div align='center'><table border='0' width='800' class='tmenu'><tr><td>&nbsp;<font class='titulo'>NUESTROS CLIENTES</font><br>
        <iframe src='ver_clientes.php'  width='780' height='180' scrolling='no' frameborder='0' border='0'></iframe></td></tr></table></div>";
 
$cuerpo.="</td></tr></table><br></div>";
 
    $cabeceras.="<title>$nombre_web</title>
    <meta name='description' content='$nombre_web' />";
 
?>

y tiene un css de las fotos que es asi:

1
2
3
4
5
6
7
8
9
10
11
12
#ex4 img {
	margin: 10px; border: 5px solid rgb(255, 255, 255); border-image: none; box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
}
#containerEx5 {
	background: rgb(51, 51, 51);
}
#ex5 {
	margin: 0px auto;
}
#ex5 img {
	margin: 10px; border: 10px solid rgb(238, 238, 238); border-image: none;
}

ayudenme a entender que modifico y donde o como para poder hacerlo. muchas gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de txema

hacer zoom a la foto al pasar mouse

Publicado por txema (4 intervenciones) el 14/02/2016 18:02:22
Hola Leonardo:

El efecto que pretendes está en las siguientes etiquetas sobre tu div o class :hover correspondientes:

1
2
3
4
5
6
7
8
9
10
11
12
/* rotación */
-webkit-transform: rotateZ(90deg); /* Safari yChrome */
-moz-transform: rotateZ(90deg); /* Firefox */
-ms-transform: rotateZ(90deg); /* IE 9 */
-o-transform: rotateZ(90deg); /* Opera */
transform: rotateZ(90deg);
/* zoom */
-webkit-transform:scale(1.25); /* Safari y Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);

CSS3 te permite la rotación y el zoom que desees.

Los códigos están transcritos de memoria. Es cuestión de probar ángulo de rotación y zoom.

Los originales de la página que mencionas me permito considerarlos (opción personal) más inestables (transform:translate3d y transform:translateZ con sus correspondientes adaptaciones a navegadores), sin demeritar su publicación en CSS3 como válidos.

En el mundo web son muchos los caminos que conducen a la misma Roma.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

hacer zoom a la foto al pasar mouse

Publicado por Jesus Ramirez Serrano (5 intervenciones) el 19/05/2016 20:53:17
Hola amigo, este es el codigo para tu css

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
.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 */
 
}

Espero te sirva
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar