Solved

Raised or Grow State on Image upon Hover

  • 22 April 2020
  • 1 reply
  • 110 views
Y

I am trying to figure out the CSS I could use on a landing page with lots of images so the effect of each image when you hover over it is to be raised or grow.

Have had trouble finding a solution in community, so its about time I ask directly to the community!

It looks like it is outlined here, but not sure how I would implement on an unbounce page, especially with many images:

https://www.w3schools.com/howto/howto_css_zoom_hover.asp

Thank you!

icon

Best answer by Hristian 23 April 2020, 08:25

View original

1 reply

Hristian
Userlevel 7
Badge +3

Hi @yoav,

A few months back Unbounce added the ability to assign custom classes to elements on your page.

So in order to apply the CSS you’ve linked above, all you have to do is:

  1. Apply a custom class to each image (ex. zoom)

2020-04-23 at 9.24

  1. Copy/paste the CSS from the example without the div part and also without the green square.

2020-04-23 at 9.31

Publish/republish your page and you are done.

Here is an example page: https://hello.revise.agency/zoom-image/

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/

Reply


Terms & ConditionsCookie settings