jQuery code needed to create effects on images and layout changes on a WordPress website

We need help with a couple of effects / functionalities on a website.

1) We have a home page hero image that right now when hover it turns from black & white to colour. You can see our hero image here: [login to view URL] (screenshot attached for reference of the image). What we want is to colour the image on hover but only the area the mouse / pointer passes over the image, so if the mouse move to another area on the photo it colours another part of the image, like a paint brush. We have an example of how we want to behave / look like, in the example they use a blur effect on the image. Basically we want same as the example but with colour. See main hero image of the example here: [login to view URL]

2) On the section with 7 images (creative, media marketing, internet marketing, etc - below the hero image) of our home page: [login to view URL] - we want when people hovers over each box, show 3 more boxes with some information (title/tagline, description and a video - 3 new boxes total). Attached image of the section that needs work and the mock-up of potential layout (blue boxes, yellow boxes). Important: we are open to suggestions on how to show the blue boxes on the screen, the mock-up's layout is only to show how many boxes, maybe just all 3 boxes appear and collapse under the hover over item.

We have used [login to view URL] library before:

[login to view URL]

to achieve similar results. See example here of the library in action:

[login to view URL]

Click on any of the images with men and see how a box with info appears. The great thing about [login to view URL] is that r-arranges elements on the screen and will be great for mobile as well. Maybe we can use this library for the task.

All 7 boxes with images images (creative, media marketing, internet marketing, etc) must change to colour when hover over and show specific info boxes / containers and show the info boxes. We also need to be able to input the information for the info boxes through Custom Fields on the backend of the page/website ideally with Advanced Custom Fields plugin (we have the PRO license) [login to view URL]

The website is already in progress, will give you access to the backend and through FTP to start working on the sections. We have a child theme with the jQuery and CSS code ready to tweak.

Again, we are open to suggestions on how to achieve our 2 tasks. Please type "I CAN MAKE IT HAPPEN" to make sure you read and understood our project needs and can help us.

Thank you.

CSS HTML jQuery / Prototype PHP WordPress

Nº del proyecto: #17211572

Sobre el proyecto