Docs

[850it]

How can I make a CTA with an image as a background?
Also is it possible to change it for another one on the mouse hover?

Thanks

[Jade]

Hi There,

Thanks for writing in! assign a unique CLASS for each of your CTA element.

And then update your code to this.

a.myclass {
	background-image: url('BACKGROUND IMAGE URL');
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

Do that for each of your CTA element, with there corresponding classes.

If this does not work, provide us the site URL.

Hope it helps, Cheers!

[850it]

Thanks, it worked.

But can I also change the picture on hover with another picture?

Thanks

[850it]

Can you please help me

[Nico]

Hi There,

You could change the image hover by adding this code below.

a.myclass:hover {
	background-image: url('BACKGROUND IMAGE URL');
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

Hope it helps.

Let us know how it goes.

Thanks.

[850it]

Thanks, that worked great!

Can I also add a fade animation when the backgrounds change? Now they change instantly, I want to smooth it out a little bit.

[Rue Nel]

Hello There,

Thanks for letting us know that it works out for you. If you want to add some transition, please have the code updated and use this instead:

a.myclass {
	background-image: url('BACKGROUND IMAGE URL');
	background-position: 50% 50%;
	background-repeat: no-repeat;
        transition: background 0.5s ease;
}

a.myclass:hover {
	background-image: url('BACKGROUND IMAGE URL');
	background-position: 50% 50%;
	background-repeat: no-repeat;
        transition: background 0.5s ease;
}

Hope this helps. Please let us know how it goes.

[850it]

Thanks, it works great!

[Rahul]

Glad to hear it!

If you have anything further to ask, kindly let us know. We would be happy to assist you with anything.

Thanks.

[Author]

Posts