Avisos
Vaciar todo

Hosting WordPress 70% dto Dominios promo

agregar movimiento al pasar el mouse en la foto en el blog  

Página 1 / 2
 
Fabiana
 Fabiana
Noble Member

hola como puedo agregar momviento a la foto al pasar el mouse gracias

 

Contenido solo visible a usuarios registrados

Citar
Respondido : 02/05/2023 6:39 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Fabiana, 

Para añadir esta animación prueba con el siguiente Congo CSS

.article-list .article .article-intro-image img, .article-list .article .article-featured-video img, .article-list .article .article-featured-audio img, .article-list .article .article-feature-gallery img {
border-radius: 3px 3px 0 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: all .3s ease;
}
.article-list .article .article-intro-image img:hover {
transform: scale(1.2);
}

Puedes ver mpas información sobre ello en este enalce → Contenido solo visible a usuarios registrados

Un Saludo 

ResponderCitar
Respondido : 02/05/2023 8:29 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Fabiana
 Fabiana
Noble Member

@karen

agregue el codigo pero no se mueve

ResponderCitar
Respondido : 03/05/2023 2:46 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Fabiana, 

En este caso prueba añadir !important al final de cada regla y comprueba si con ello te lo aplica

.article-list .article .article-intro-image img, .article-list .article .article-featured-video img, .article-list .article .article-featured-audio img, .article-list .article .article-feature-gallery img {
border-radius: 3px 3px 0 0 !important;
width: 100%!important;
height: 100%!important;
object-fit: cover;
transition: all .3s ease!important;
}
.article-list .article .article-intro-image img:hover {
transform: scale(1.2)!important;
}

Si con ello no funciona debes consultarlo con el soporte de la plantilla ya que no podemos modificarla, tambien puedes consulta con nuestro directorio de colaboradores  quienes pueden ayudarte a añadir lo que necesitas

Un Saludo 

ResponderCitar
Respondido : 03/05/2023 4:06 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Fabiana
 Fabiana
Noble Member

@karen

nada lo agregue y no se meuve

ResponderCitar
Respondido : 03/05/2023 4:36 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Fabiana, 

En este caso como te comento debes consultarlo con el soporte de la plantilla ya que no podemos modificarla, también puedes consultar con nuestro directorio de colaboradores  quienes pueden ayudarte a añadir lo que necesitas.

Un Saludo 

ResponderCitar
Respondido : 03/05/2023 4:38 pm

Cursos Gratuitos WordPress

Fabiana
 Fabiana
Noble Member

@karen

karen de la plantilla me dan este ejemplo

Hi Fabiana,

as always by using Custom CSS, here is example code:

.article-list .article {
  border-radius: 5px;
  background: white; transition: .4s ease-out; 
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.03);}

.article-list .article:hover {
     box-shadow:0 20px 20px 0 rgba(43,46,48,.1);
 transform:translateY(-3px);
 }
 
ResponderCitar
Respondido : 03/05/2023 4:43 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Fabiana, 

En este caso puedes intentar añadirlo de acuerdo a sus instrucciones, ten en cuenta que aunque las reglas son distintas puede aplicar el movimiento que deseas en tus post. 

Un Saludo 

ResponderCitar
Respondido : 03/05/2023 4:51 pm

Fabiana
 Fabiana
Noble Member

karen era a modo de ejemplo porq lo agregue y no pasa nada creo que tiro el codigo como ahora tendria q adaptarlo a lo mio

ResponderCitar
Respondido : 03/05/2023 6:01 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Fabiana, 

En este caso el código que envíe anteriormente si funciona dentro del devtool, puedes revisar añadir estas mismas reglas dentro de esta sugerencia. Revísalo dentro de tu plantilla y comprueba si te permite aplicarlo. 

Un Saludo  

ResponderCitar
Respondido : 03/05/2023 6:11 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Fabiana
 Fabiana
Noble Member

quedaria algo asi

.article-list .article .article-intro-image img, .article-list .article .article-featured-video img, .article-list .article .article-featured-audio img, .article-list .article .article-feature-gallery img {
border-radius: 3px 3px 0 0 !important;
width: 100%!important;
height: 100%!important;
object-fit: cover;
transition: all .3s ease!important;
}
.article-list .article .article-intro-image img:hover {
transform: scale(1.2)!important;
}
.article-list .article {
  border-radius: 5px;
  background: white; transition: .4s ease-out; 
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.03);}
 
.article-list .article:hover {
     box-shadow:0 20px 20px 0 rgba(43,46,48,.1);
 transform:translateY(-3px);
 }
ResponderCitar
Respondido : 04/05/2023 2:55 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Fabiana.

Si, con ese código veo que funciona sin problemas.

Captura de pantalla 2023 05 04 a las 16.09.46

 

Un saludo

ResponderCitar
Respondido : 04/05/2023 3:10 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Fabiana
 Fabiana
Noble Member

@pepesoler

pues no me funciona pepe lo que quiero hacer es que a lpasar el mouse se mueva el articulo como aqui

https://www.joomshaper.com/blog

rendig

 

ResponderCitar
Respondido : 04/05/2023 5:58 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Fabiana, 

En este caso este es otro tipo de animación, una opción para intentar es 

.article-list .article:hover {
box-shadow: 0 20px 20px 0 rgba(43,46,48,.1) !important;
transform: translateY(-3px)!important;
}

Si con ello no funciona como te comento no podemos revisar la plantilla por lo que no podemos indicarte como añadir este tipo de configuraciones. 

Un Saludo

ResponderCitar
Respondido : 04/05/2023 6:28 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Fabiana
 Fabiana
Noble Member

https://prnt.sc/OXbsd2QyAQbW

lo agregue ahi y nada

ResponderCitar
Respondido : 05/05/2023 12:01 pm
Página 1 / 2