Hello,
I would like to know the best way to achieve this site layout and functionality using pro. I would like the boxes with the overlays on hover.Then I would like the boxes on click to open an off canvas bar which will scroll to display my work as shown here. Please advise. Thank you
Hey Jennie,
Thanks for reaching out!
If you want to have a box with overlay text, please check this thread.
Hope that helps.
hello yes, thank you, that definitely helps with the hover and text aspect but I am also trying to have the image in the box zoom in simultaneously as seen in the first two boxes here:
Thanks 
Hello Jennine,
Thanks for the added information. What you can do is to use an Image element and add a Scale effect on as your hover over the column. You also need a DIV element for the overlay. This is how it should be structured.
This could be like when using Row elements:
Or you can also use the Grid element:
This will be the effect for your Image so that it scales up when hovered:
And this is how it looks on my builder preview:
Perhaps, this sample template file can help you:
Kindly let us know how it goes.
Thank you so much for your help with this. That looks great!
How can I now take make each of the columns clickable that will open an off canvas side bar as shown in this example?
Hello @Jennine,
You can simply add another DIV element next to the Image element and position it as Absolute. Again, this must have a 100% width and height as well.
Inside your DIV element, you can insert the Off Canvas element. In the Off-Canvas Toggle element settings, Off-Canvas > Toggle, you will have to disable Text and Graphic in order not to display anything while settings the width and height to 100% so that the whole column will becomes clickable.
Kindly let us know how it goes.
Hi
Thank you so much for your help. I followed your directions but it doesn’t seem to be working for me. What am I missing? I will attach the credentials.
Thank you
Hi @Jennine,
I went ahead to check the page on your website but unfortunately, the Page Builder never loaded and shows the Session expired error as shown in the given screenshot.
I would suggest you check once and let us know once it is ready to access, and also mention the section where you have added the Div and the Off Canvas as suggested by my colleague, so we can investigate the setting done by you.
Thanks
Helllo,
I just logged in and did not get an error.
I added the div with the off canvas to the first cell. “rider insurance”.
Thank you
Hi @Jennine,
Unfortunately, the same thing happen this time too. There are many console errors are showing in the Browser while loading the Page Builder and that is why showing the Session Expired error.
Thanks
I will attach the credentials again
I am not seeing what you are seeing on my end. Please see attached screenshot:
ok i managed to get the off canvas to work
Thats great! Thank you so much 
Hello,
On mobile and tablet, I would like the off-canvas to cover the screen completely. How can I achieve this, please? Here is an example of how I would like it to be on mobile.
Thanks for your help
Hey @Jennine,
To make the Off-Canvas fullscreen on mobile and on Tablet screen sizes, please edit your page and click the Off-Canvas element elements, Off-Canvas > Size > Width.
Click the word “Width” to launch the Responsive Element styling and set the width for mobile and tablet screen sizes from 100% to 100vw.
Kindly let us know how it goes.
hi, thank you that worked nicely.
Now I would like to change the padding on the entire off canvas for mobile. I see the inspector it s set to padding-right: calc(calc(1em * 2); I want to set it to calc(1em * 1). I there a way i can do this in cornerstone without writing custom media queries?
Thank you
Hello @Jennine,
Click your Off-Canvas element and find the “Backdrop & Close” tab. Click the “Dimension” to launch the responsive settings.
Best Regards.
Thank so much. That worked. However, I am getting this weird scrolling behavior on my iPhone when opening the off-canvas. It’s not scrolling smoothly. If you click on cupcake, logo, or movie poster you will see what I mean. I there a way I can fix this?
Also, this is the view on tablet. There is a blank cell. Isn’t there a way to make the third cell grow instead of putting a blank one there?
Thank you