-
Posts
-
I have a customer that wants a landing page that gives customers a choice of which site they want to visit. The customer wants it as a split-screen similar to this site where the image gets color or there is some animation on hover.
Sample
https://trescarnales.com/1. Does anyone know if this is possible using enfold?
2. If not, does anyone know of a plugin that might help me achieve this type of effect?Hey Chris,
Thank you for the link to a mock-up, this can be created by using a grid row element with two cells set at 100% visual height,
each cell with a background image, and the sidebar, footer, header, and title bar all set to hidden in the “layout” option for the page:
For a gray scale background image that changes to color on hover, use this css:.left-side-split,.right-side-split { filter: grayscale(1); } .left-side-split:hover,.right-side-split:hover { filter: grayscale(0); }please note the custom classes for the two cells, the classes are added to via the Enfold Theme Options > Layout Builder > Show element options for developers setting.
Frontend results:
You can then add logos, text, and links to each cell.
The tricky part will be to create a 45 degree edge between the two images, but there are many css tutorials that can help with this, such as this video: https://youtu.be/A11xEtSNDr8
I hope this helps to get you started with this.Best regards,
MikeThank you so much!! This will definitely get me started on the right track. I had no idea where to begin. I’m glad this won’t require a plugin.
- You must be logged in to reply to this topic.