Tagged: animation, CSS, masonry, masonry element
Hi guys. Just designing a website for a client and don’t want to put a design forward that isn’t achievable in enfold.
Wondering how I’d go about adding some CSS to the masonry element to achieve the following:
Caption over the image. But on mouse hover, a coloured bar appears at the bottom (a bit like the one that appears on Masonry Animation 2 here: https://kriesi.at/documentation/enfold/masonry/#overlay-styles but not containing the caption). Possibly with the image slightly animated (increasing in scale as per Masonry Animation 2)
I’ve quickly mocked up what I mean here:
The left hand image showing how I’d like the hover to look.
Is this doable?
Thanks in advance.
Hey Thedogscreative,
Do you have it added somewhere on the page already? The bottom border should be doable.
Best regards,
Victoria
Hi Victoria,
No – I haven’t started building it yet. I’m presenting some designs to the client soon and just wanted to check it was doable before putting it forward as an idea to them.
Hi Thedogscreative,
Well, the title on hover and image animation already exist on the masonry, it can be that the border can be added too.
Best regards,
Victoria