[Resolved] Flipbox effect using posts in a widget

[NBC]

Any suggestions for duplicating the flipbox hover effects in the Avada theme? These apply a hover effect to posts within a widget.

Tough to offer alternatives when someone fixates on specifics.

I spent about an hour searching WP plug-ins for keywords such as “flip,” “flipbox,” “flip box,” “hover effects,” etc., all to no avail.

TIA for any suggestions.

[Tom]

GP wouldn’t have that kind of functionality – we try to keep things as light as possible and only add things the majority of users will use.

You may need to look at a page builder, or a custom solution coded for you.

Let me know if you need more info 🙂

[NBC]

Hi, Tom:

Yes, I knew it wouldn’t be a built-in function of GP. Just curious if anyone knew of a plug-in that accomplishes this.

So much of what these page builders do is available separately that I thought it was worth a try.

[Tom]

It would be nice to find it without the need for a page builder – I’ll do some digging 🙂

[NBC]

I looked at some of the page builders recently, most closely at Beaver Builder and Elementor, after I read some comments raving about the combination of GPP with Elementor.

Talk about “Be careful what you wish for!” Remove the page builder, and in most cases, your site disintegrates into a barrage of shortcodes. By trying to offer all things to all people, these plug-ins multiply page sizes even if you only want a fraction of their functionality.

Not a fan! I understand the attraction, but I’d rather look for focused solutions to specific problems.

[Tom]

I agree with you 100%.

I’m not sure how advanced you are in coding, but here are some custom examples:
https://codepen.io/syedrafeeq/pen/eCkFt
https://davidwalsh.name/css-flip
http://css-flip-box-3d.firchow.net/
http://sixertoy.github.io/css-flipbox/

[NBC]

Thank you ever so much, Tom!

(Still love the avatar photo with your adorable little poppet!)

[Tom]

Thank you! She’s not so little anymore 🙁

[NBC]

That’ll happen! 🙂

[Encarni]

Hi there,

I’m trying to use the flipbox CSS effect but my images are overlapping the next container and footer at the end of this page: —.

I’m using this guide: https://www.w3schools.com/howto/howto_css_flip_image.asp

I have realized that the overlapping occurs when I use relative values for “width” and “height” in the CSS -instead of the example’s absolute figures (because I don’t want to have a 300×200 px box, but the three images occupying all the available space in 3 columns).

After trying a lot of things, the only one that works reasonably well is using “min-height” in the CSS, but it doesn’t seem a clean solution for me.

I know this is a CSS issue and not a GP problem, but would anyone be so kind to help me?

[Leo]

I would recommend posting your question on a general WordPress forum like this:
https://wordpress.stackexchange.com/

Unfortunately we have to be careful with custom CSS we helped in the GP forum here.

[Author]

Posts