CSS - Zoom hover imagenes

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

/* 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 clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 624

Zoom hover imagenes

Publicado por xve (490 intervenciones) el 16/04/2018 13:58:52

Hola Jose, utiliza el z-index para ponerlo encima de la otra imagen...

z-index:100;

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

-1

Comentar

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

Comentar

Pos: 2

Val: 624

Zoom hover imagenes

Publicado por xve (490 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

Comentar

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.

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

Comentar

Pos: 7

Val: 165

Zoom hover imagenes

Publicado por juan jose (57 intervenciones) el 21/04/2018 17:48:24

no se para que necesitais z-index

observa este codigo que hice

html

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

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

Comentar

Pos: 7

Val: 165

Zoom hover imagenes

Publicado por juan jose (57 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

.et_pb_column_1_4:hover{

z-index:100;

Valora esta respuesta

Comentar

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

Comentar

Pos: 7

Val: 165

Zoom hover imagenes

Publicado por juan jose (57 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.

elena.zip(64,2 KB)

Valora esta respuesta

Comentar

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

Comentar

necesito que un hover en el li me active un onmouseover

Animacion solo cuando se inspecciona