CSS - Zoom hover imagenes

 
Vista:
sin imagen de perfil
Val: 11
Ha disminuido su posición en 6 puestos en CSS (en relación al último mes)
Gráfica de CSS

Zoom hover imagenes

Publicado por Jose (5 intervenciones) el 16/04/2018 09:49:41
Hola a todos as,

Mi problema es que hago zoom hover al pasar el ratón por las imágenes y se me queda la imagen siempre por debajo. Supongo que está relacionado con el z-index pero no se si será necesario usar alguna función javascript para que funcione. Necesito que al pasar el ratón por encima la imagen haga zoom sobre el resto de imágenes. Os dejo una imagen para que observéis mi problema.
zoom-imagen

Este es el código css que estoy utilizando

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Image zoom */
 
.image-zoom img {
 
	transition:all 0.5s ease-out;
    -moz-transition:all 0.5s ease-out ;
	-webkit-transition:all 0.5s ease-out;
}
 
.image-zoom img:hover {
 
   transform: scale(1.5);
  -moz-transform: scale(1.5);
  -webkit-transform:scale(1.5);
   box-shadow: 0px 6px 33px 0px rgba(0,0,0,0.75);
}


Saludos,

Jose
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 xve
Val: 630
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Zoom hover imagenes

Publicado por xve (489 intervenciones) el 16/04/2018 13:58:52
Hola Jose, utiliza el z-index para ponerlo encima de la otra imagen...

1
z-index:100;
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-1
Comentar
sin imagen de perfil
Val: 11
Ha disminuido su posición en 6 puestos en CSS (en relación al último mes)
Gráfica de CSS

Zoom hover imagenes

Publicado por Jose (5 intervenciones) el 16/04/2018 15:58:11
He probado con el z-index y no funciona. Lo puse en la clase .image-zoom img:hover y no funciona. Sigue apareciendo por debajo la imagen.
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
Imágen de perfil de xve
Val: 630
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Zoom hover imagenes

Publicado por xve (489 intervenciones) el 16/04/2018 18:53:09
Hola Jose, nos puedes mostrar el código HTML y los estilos para probarlo?
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
sin imagen de perfil
Val: 11
Ha disminuido su posición en 6 puestos en CSS (en relación al último mes)
Gráfica de CSS

Zoom hover imagenes

Publicado por Jose (5 intervenciones) el 17/04/2018 10:15:36
Supongo que es importante saber que lo estoy utilizando con el tema wordpress Divi. Me figuro que al haber un tema padre y tema hijo con el z-index pueda haber algún problema y no lo tenga en cuenta. Luego intentaré colocar las clases directamente en el tema padre pero me da que tampoco va a funcionar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Image zoom */
 
.image-zoom img {
 
	transition:all 0.5s ease-out;
    -moz-transition:all 0.5s ease-out ;
	-webkit-transition:all 0.5s ease-out;
}
 
.image-zoom img:hover {
   z-index:999;
   transform: scale(1.5);
  -moz-transform: scale(1.5);
  -webkit-transform:scale(1.5);
   box-shadow: 0px 6px 33px 0px rgba(0,0,0,0.75);
}
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
Imágen de perfil de juan jose
Val: 196
Bronce
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Zoom hover imagenes

Publicado por juan jose (54 intervenciones) el 21/04/2018 17:48:24
no se para que necesitais z-index

observa este codigo que hice


html




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
 
<link  href="css/zoom.css" rel="stylesheet" />
 
</head>
 
<body>
			<img src="https://cdn1.regalos.es/media/catalog/product/cache/4/image/1800x/040ec09b1e35df139433887a97daa66f/b/o/book-de-fotos-para-modelo-profesional-valencia-regalos-es_es0867-19138ebd.jpg"/>
			<img src="https://cdn1.regalos.es/media/catalog/product/cache/4/image/1800x/040ec09b1e35df139433887a97daa66f/b/o/book-de-fotos-para-modelo-profesional-valencia-regalos-es_es0867-445a7f35.jpg"/>
			<img src="https://cdn1.regalos.es/media/catalog/product/cache/4/image/1800x/040ec09b1e35df139433887a97daa66f/b/o/book-de-fotos-para-modelo-profesional-valencia-regalos-es_es0867-cf32cfff.jpg"/>
			<img src="https://cdn1.regalos.es/media/catalog/product/cache/4/image/1800x/040ec09b1e35df139433887a97daa66f/b/o/book-de-fotos-para-modelo-profesional-valencia-regalos-es_es0867-db871d2f.jpg"/>
</body>
</html>

css




1
2
3
4
5
6
7
8
9
10
img{
 
    transition: transform .2s;
}
 
img:hover {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5);
}


solo tienes que darle una clase y ponerlo delante de img como tenias
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
Imágen de perfil de juan jose
Val: 196
Bronce
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Zoom hover imagenes

Publicado por juan jose (54 intervenciones) el 23/04/2018 11:56:37
es el problema de las plantillas, que hay que buscar a wally

1F5


solucionado los laterales con un z-index a la columna, pero queda la parte inferior, igual cada imagen tiene un valor, sin embargo si le aplicas subrayados con css a img lo hace sin problemas, es decir hay algo por ahi


1
2
3
.et_pb_column_1_4:hover{
z-index:100;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 11
Ha disminuido su posición en 6 puestos en CSS (en relación al último mes)
Gráfica de CSS

Zoom hover imagenes

Publicado por Jose (5 intervenciones) el 23/04/2018 14:17:24
Eso no funciona (.et_pb_column_1_4:hover{
z-index:100;
} )
es un poco desesperante. Me da que la solución va a venir con alguna función javascript del estilo mouseover pero no tengo los conocimientos suficientes.
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
Imágen de perfil de juan jose
Val: 196
Bronce
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Zoom hover imagenes

Publicado por juan jose (54 intervenciones) el 23/04/2018 16:20:58
te mando un zip para que veas que funciona, pero no se hace desde el admin de wp, ni nada por el estilo, es editar directamente una hoja css que tienes, que se llama style, dentro de wp-content/themes/Divi

estube desde que lo vi probando de todo, descargando css de la pagina.

saludos

pd. si ves que en un minuto o minutos no te hace el cambio aunque refresques, refresca la pagina con " control + f5 ", asi refrescara borrando la cache, por que hay veces que no los pilla en tu pc hasta que haces eso.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 11
Ha disminuido su posición en 6 puestos en CSS (en relación al último mes)
Gráfica de CSS

Zoom hover imagenes

Publicado por Jose (5 intervenciones) el 23/04/2018 18:19:59
Muchísimas gracias Juan Jose eres un crack. He insertado la modificación de la clase .et_pb_column_1_4:hover{
z-index:100;
} en la hoja style.css del tema hijo y funciona perfectamente. Que relajado me he quedado, menudas semanas que llevo con esta historia. Te debo unas cañas ;-). Menuda diferencia ahora lo bien que se ven las imágenes.

Saludos,

Jose
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