How can I accomplish these half-page-square effects in WB?

[etcbbu]

Hello,

On a new website project I am about to do, I like the square-effects you see on this website:

https://www.tylersportvehicles.com/

On the homepage, there at the top; the four squares that are titled, "New Cars", "Used Cars", "Financing", and "Batteries and Services". I do not necessarily need to mimic the effects *EXACTLY*, but I really like the idea of two or three squares

1) that are side-by-side,
2) and that "Find the edge of the window",
3) and when you mouse-over them, they have *some sort of movement* effect.

I've seen other website do this more, lately, too; other examples being

https://mobirise.com/extensions/beautya ... ideos.html
scroll down on the page, just below the part that says "Images & Videos Example" , and it's the 8 images that are there.

Just a way to have some squares the "find the edges", so to speak. I'm looking at having three square images, side-by-side-by-side; and some sort of effect built into each one of them. Just don't know how to go about executing this on WB. Any ideas?

[crispy68]

You could use layout grids or flex grid. Just depends on what you end up putting inside them.

[etcbbu]

So, different "squares"/[images] sitting right up against each other within a Flex Grid/Layout Grid let you assign the different mouse-over effects on them, via "Events", individually?

[etcbbu]

Are Flex Grids "floating Mode" - only? I'm not seeing a way to change that, and I can't seem to make this thing show up live on a page on which I am working..

[etcbbu]

I have tried creating *both* a

- Flex Grid
- Layout Grid

object, and am trying to get them to display on this page:

https://www.mcintyrebuilderstyler.com/testpage.php
(just above the Carousel is where it is supposd to show up)

Here is a screenshot of within my .WBS work-space, if that helps:

https://www.mcintyrebuilderstyler.com/scrn.png

and I cannot get them to show up at all. Can anyone look at the code and tell me what I'm doing wrong..?

Remember, my end-goal, here, is to have three squares sitting next to another another, and as user mouses over each of them, a different effect" happens. Just a little fade, or slide-in, or even just a little blur-in or something.

[crispy68]

hey etcbbu,

So are you simply wanting each square to have a background image and you when hover over there is some sort of an effect with the image and there is a text box on top?

If so, let me try and put together a demo of it.

[etcbbu]

Thanks for the dialogue, crispy. So what I'm trying to accomplish is, I believe, the first part of what you said. Yeah, I was thinking I set it to

3 Columns
1 Row

So that I have, yeah, three "squares" that are sort of "slots"; each onto which I will, yes, assign a Background Image. And yes, having a text box on top of each of them that functions as a link to page(s) within the .WBS project I will create/define is acceptable.
(but honestly, I really like the idea of making each thing *itself* a link, *itself", which a user can sort of mouse-over, among the three images, a little "Effect"I set can happen, and then the User will, yes, click a link that will take them to another three pages I will define and set in the .WBS project. Again, kind of like this page does https://mobirise.com/extensions/beautya ... ideos.html , while it does have a textbox on each one, they also seem to have clickable action built into the image *itself*, too, not just the text-box on top of it)

[crispy68]

hey etcbbu,

Based on that link in your last post I believe i have the solution for you. It is similar to what i did here on a template I created. Look just below the main slideshow at the top.

I believe I still have your email and I want to shoot over something to you to look at to confirm. Just to be safe, can you shoot me your email again to ron@wizbangwebdesign.com?

[etcbbu]

That example is *wonderful*, sir; e-mailing you now..