Navigation Boxes with effect

Hi there.

It’s possible with GenerateBlocks and GenerateBlocks Pro.

This is essentially a 3X3 container grid. (Grid Template Columns: repeat(3, minmax(0, 1fr)) that goes to 1fr on mobile). For the image hover effect, you do the following:

1. Insert a container and set position to relative. Set its tag to be a link. (a tag) and set you link destination in there. Set the background image to #FFF. Set OVERFLOW-X and OVERFLOW-Y values to hidden.
2. Insert image inside the container, set Display to Block. Create a TRANSITION effect and set duration to 0.3s.
3. Below, insert a shape block with the magnifying glass, set the color to a dark one and OPACITY to 0. Set position to Absolute, with Inset: 50% for Top and Left. Add a Transform effect with Translate effect type and set Translate X and Translate Y to –50%. This will essential center the magnifying glass horizontally and vertically in relation with the image.

4. Select the initial container and create a new selector, name it &:hover img. Set the opacity to 10% or similar.

Also, create a Transform effect, with the Scale type and a SCALE value of 1.1.

5. Select the initial container, create a new selector and name it .gb-shape. Create a TRANSITION effect and set duration to 0.3s.

6. Again, select the initial container, create a new selector and name it &:hover .gb-shape.

Set OPACITY to 100%.

That should create the effect you want.

There are going to be containers for all grid items. The instructions I provided were only for the image hover area. That is going inside the parent containers of each grid. So each grid item will have:

Parent container (probably with a grey background to emulate your example)
— Container for image (instructions I provided)
— Title text
— Description text
— Button (Details)

Hope that’s clearer.

Title, description and button can go below the Container for image. They don’t need to be inside a container.

List view will look something like this.