Are Single Image animations possible?

[danny_dinero]

Hi,

I want to add an image to my page that links to a URL, but I want the image to have an animation when you hover over it. This automatically works if I add a product element to my page, but not if I just want to add a single image.

Is this possible within the page builder or using a shortcode? I have tried placing a single image element on the page, but it has no options for animations. I have also tried adding a text block element, and adding an image banner shortcode.

Thanks

[Melanie – SUPPORT]

Hi, I’m afraid we don’t have such a shortcode ready, but I will ask the developer if he has plans for that!

All the best

[danny_dinero]

Hi Melanie,

Thanks for your response! Please let me know if there are plans for it because I think it would very useful.

[Swift Ideas – Ed]

Hi there,

No plans as of yet for that, however we have the image shortcode within the page builder which can have an image with hover overlay for the lightbox link – http://neighborhood.swiftideas.net/shortcodes/images-videos-lightbox/

– Ed

[danny_dinero]

Hi Ed,

That is almost what I am after, however if I specify a URL for the image to link to (which is what I want) then the hover overlay does not work.

I wonder if there is another way I could implement this? I have also tried adding a Text Block with the page builder, then adding an “Image Banner” shortcode. In there you can specify “Content Animation”, but that will only work when the page is first loaded…not on hover.

Thanks

[laranz – SUPPORT]

Hi,

Sorry for getting you late, you can try something like this in Custom CSS.

figure:hover { background-color: blue; opacity: 0.8; }

Change the background color, and the opacity to your needs.

Let me know, what you got.

Thanks,
laranz.

[danny_dinero]

Hi,

Almost exactly what I need, however this will add a hover effect for all the images on the site which is not what I want. I want to limit it to only some images.

I’m not the most knowledgeable person in CSS, but I think I may be able to do this by adding a text block from the page builder, then adding my image to the text block, and then specifying an Extra class name (which will be referred to in the Custom CSS)?

I have added some screenshots to illustrate this, however it hasn’t worked. Any help?

Thanks again

[Melanie – SUPPORT]

That could be possible. Can you show me a link of a page with an image that has a custom class?