Docs

[rayman_15]

Hi,
First of all, I really enjoy using the X and its great functionality!
I set up a site using ethos, and chosen the masonry design for a blog (home) page. Unfortunately, I have a feeling that the level of featured images’ responsiveness won’t be sufficient enoudh to properly guide my readers. What I mean is that the only change visible on hover on images is a slight change of the title background’s transparency.
Is there a way to (for example) add a “fade” effect on hover, similar to this displayed by the default post slider, or to add an effect similar to those from Essential Grid’s “skins”?

Best regards!
Rayman

[rayman_15]

This reply has been marked as private.

[Rue Nel]

Hey Rayman,

Thanks for writing in! To have fade effect on hover or a different one like the post carousel, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

Like Post Slider:

.x-iso-container .entry-cover:hover .h-entry-cover {
    background-color: rgba(0,0,0,0.95);
}

Like the Post Carousel:

.x-iso-container .entry-cover .h-entry-cover {
    top: 100%;
}

.x-iso-container .entry-cover:hover .h-entry-cover {
    background-color: rgba(0,0,0,0.95);
    top: calc(100% - 4em);
}

Hope this helps. Please let us know how it goes.

[rayman_15]

Hey support!
Thank you very much for your help, this is exactly what I was looking for! The code works well and now I’m trying different configurations of effects 🙂

Best regards,
Rayman

[Rupok]

You are welcome Rayman!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts