Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1175936

    Hi,

    I have a client who’d like to have a picture-based secondary Navigation underneath a Layerslider element. The Navigation should have some kind of “Mac OS dock” zoom effect:
    6 pictures next to each other, each picture enlarges on hover.

    Here’s a rough example layout:

    Navigtion Example (enlarge on hover)

    Text below the images is optional. Ideally, the enlargement effect should be smooth/animated, and the text size should also increase/decrease. But if that’s not possible, I could maybe convince him to go for a non-animated solution, with fixed font size.

    Is this possible with CSS only? Or would someone here be able to point me towards a plugin that would work with Enfold. (I don’t mind paying for it – commercial plugin is fine. But I guess bespoke coding would be too expensive for the client).

    My initial thought was to have a horizontal grid of 6 images, but Enfold only allows a grid of 5. Another option could be Enfold’s Horizontal Gallery – but that doesn’t allow for headlines, and it doesn’t allow to link the image to another page.

    It’d be great if someone here could point me in the right direction.
    Thank you!!

    #1176074

    Hey BelIblis,

    Well, you could try using the Masonry with 1 row and this kind of scaling effect.

    Please, have a look at this one here, this is a masonry too.
    Image 2020-01-19 at 19.53.56.png

    Best regards,
    Victoria

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.