Background image on button - hover effect

[archerthefox]

Hi team,

I’m trying to create an image button that on hover goes transparent and shows text for the colour like “Black”.

I’ve tried doing a Div with the background image and linked text child, but when I apply the opactiy transformation it’s also making the upper layer go transparent too. I can’t find a Z index option on any of them so I’m at a loss.

Can I use CSS to add an image to the background of a button?
Or can I single out the background for the effects and not have the effects apply to the children?

lexs7.sg-host.com is the dev site. I’m applying it in the Our Collection Mega Menu.

HALP!

Thanks,

Lex

[ruenel]

Hello Lex,

Thanks for writing in!

Are you referring to this page?

Please do the following:
1.) In your Column element settings, Find the Effects tab and enable the “Link Child Interaction” option

2.) In your Text element, you can set a transparent Color and a Black Interaction color:

Every time you hover over the column, the color of the Text becomes black.

Hope this makes sense.

[archerthefox]

No I’m referring to the Our Collection Mega Menu.

How do I make the image turn transparent as the text goes black?

[ruenel]

Hello @archerthefox,

You will still do the same.
1.) In your DIV element settings, Find the Effects tab and enable the “Link Child Interaction” option

2.) In your Image element settings, you can use Interaction and set the opacity to 0 so that when you hover, the image will become transparent.

3.) You will have to add a Text element with the same color settings as I mentioned in my previous reply.

If you are still having a hard time doing it, please provide us with your WP Access so we can check your element settings. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[archerthefox]

I think I’ve followed the instructions but it doesn’t seem to be working. I’ll add the logins to a secure note.

I want the text over the top of the image so I’ve set the DIV background to be image and added a text overlay.

[ruenel]

Hello There,

The password does not work for us. Please double-check.

I do not see a Text element in your header. You should add a Text element.

Best Regards.

[archerthefox]

Sorry! Password is working now.

Go to another page, I’ve been building it in a different header on the other pages.

This page for example.
http://lexs7.sg-host.com/campbellfield/

You can see I added a div element to try and follow your instructions.

[ruenel]

Hello @archerthefox,

Please check out my example in your custom header:

• See the secure note below for the link.

Thanks.