Hey guys,
I'm creating a website and on it I'll be listing 10 services that I provide. To organize these 10 services, I wanted to create 10 hexagonal flip boxes to form another hexagon with two arranged at the top, three in the first middle row and then another three right under with two at the bottom (that might be confusing so I've attached an image except I would need to add another row of three). On the first side of the flip box I want to have an image background and the title of the service (e.g. responsive design) then when someone hovers over it I want it to flip to show the description for that service with a colour background. Is this possible with Elementor? Do they have a plugin for this or will this require complete custom coding?
Appreciate any help 🙂
isotropic
Coding a hexagonal flip box with HTML/CSS is doable, so you can do it in Elementor as well.
https://codepen.io/junsanchezjr/pen/JNBoOd
This shows HOW it’s actually done: https://www.codesmite.com/article/how-to-create-pure-css-hexagonal-grids. It’s an AWESOME tutorial which will walk you through step by step on how to do it. Basically you’re going to be using a whole lot of the transform property.
I don’t think there’s any plugin for WordPress, or any major addon pack that will allow you to do this. So the best way would be to code it with your CSS/HTML, then use the HTML element in Elementor to insert it into a page section.
Good luck!
szuu
Hey! Thanks for your reply I’ll take a look at what you sent. How would I make the hexagons a flip box though?
isotropic
In that Codepen, they use css :hover. On hover, they transform rotate 180degrees to the back. They make the hexagon by having a front & back in html, styled in css.
.flip-container:hover{
}
.flip-container:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 100%;
height: 100%;
}