Site logo

Archived topic

Efecto hover en imágenes

9 replies · Started by Pedro on October 3, 2022

Viewing posts 1–10 of 10

Hola,

Me gustaría replicar el efecto hover de unas imágenes que he encontrado.

Al hacer hover, la imagen se oscurece y hace un pequeño zoom.

He intentado replicarlo en mi sitio pero no lo he conseguido.

El sitio donde quiero tomar este efecto es este: https://shoptimizerdemo.commercegurus.com/blog/

Y mi sitio, donde quiero replicarlo, es este: https://raybasics.co/blog/

¿Podrían ayudarme con esto?

¡Gracias!

Hi Pedro,

Try this CSS:

.blog .post-image {
    background-color: #000;
    line-height: 0;
    border-radius: 10px;
    overflow: hidden;
}

.blog .post-image:hover img {
    opacity: 0.5;
    transform: scale(1.05);
}

.blog .post-image img {
    transition: 0.5s all ease;
}

Hola Ying,

El código funcionó perfectamente. ¡Muchas gracias!

Por otro lado, aprovechando que estamos aquí, puedes ayudarme con otra duda?

He creado un bloque con "Elementos" de GeneratePress, que se muestre en la página de Blog:

https://raybasics.co/blog/

Ese bloque contiene el título de "Blog" y una pequeña descripción.

Sin embargo, por más hooks que intente, el bloque no logra visualizarse.

¿Sabes que pueda estar causando este problema?

¡Gracias!

Hola Fernando,

He usado los siguientes hooks:

after_header
after_navigation
inside_site_container
inside_container
before_main_content
before_content

Y con ninguno se muestra el bloque que he configurado.

Creo que puede ser que este bloque estoy intentando colocarlo en la página donde van las entradas del blog.

En WordPress lo he configurado para que las entradas del blog se muestren en esta página.

https://raybasics.co/blog/

No sé si tenga que ver, pero no encuentro otro motivo.

Hola Fernando,

Ya te he dado acceso a mi sitio.

El elemento que menciono que no se muestra en la página del blog, es el que lleva el nombre "Encabezado y descripción de Blog".

Cualquier pregunta que tengas, no dudes en avisarme.

¡Gracias!

In the Display Rule location, can you set the location to Blog instead of Page - Blog?

Hola Fernando,

He colocado la ubicación en "Blog" y el bloque se muestra correctamente.

¡Muchas gracias!

You're welcome Pedro!

This archived topic is closed to new replies.