Image and button simultaneous rollover

  • 15 September 2017
  • 2 replies
  • 75 views
Tristan_Ramberg

I’m trying to add rollovers for clickable images, which I’ve already done by placing transparent buttons on top of each image that when rolled over shows a transparent black overlay. But I also need to have a CTA button (“Use template”) appear on rollover in the center of the overlay at the same time. The problem is that I want the button to appear at the same time as rolling over the image, the black transparent overlay to remain when hovering over the CTA button, and my CTA button have its own rollover state.

This is a mockup from left to right: default, hover on image, hover on button

image

What would be the simplest solution? Keep in mind that this will be done for images of varying shapes.

2 replies

Alex_Scovell

Bit of a messy solution, but should work…

You can use a button with a background image to achieve the same as you have now - you can set a different image for “hover” state.

If you then use a second button on top of that which sits on the second button - have as transparent and then show your button hover state when hovered. Not sure if the 1st button would un-hover at that point - but might create a interesting effect anyway!

I haven’t tried this as you can probably guess!

digibomb
Userlevel 6
Badge +1

@Tristan_Ramberg this should work > [How-to] Add Tooltips and Rollover Images in Unbounce add you button in the hidden

Reply


Terms & ConditionsCookie settings