Column Hover Movement Effects

[brettfish]

Hi-

Building a site for a client - and looking to apply a specific hover effect to columns on a page on mouseover. We typically use a Cornerstone-compatible plugin for the effect but need more control on this one.

I want to achieve a hover effect where the column background image slides left-to-right (while staying in the container), and the headline/text simultaneously slides up a bit. I think this is very doable with CSS but I’ve been struggling to find what I need in the forums and help articles.

Here is the link to the page; https://stradebianchewines.com/our-producers/

The first row of images is using the element from the plugin that applies the effect I want to achieve.

Thanks!

[friech]

Hi @brettfish,

Thank you for writing in, but sorry I am not entirely certain what effect you’re trying to do, but you’re right it surely will require a custom CSS. Please take time to watch the following video, it should give you an idea or two on how to make an effect on the column.

• Fade-In Effects Using CSS Animations
• Creative Columns (Part 1)
• Creative Columns (Part 2)
• Creative Columns (Part 3)
• Creative Columns (Part 4)
• Creative Columns (Part 5)

Hope it helps,
Cheers!