Docs

[mahmoud237]

How can I change the background of a section when I hover on a photo on it.

Thanks

[mahmoud237]

This reply has been marked as private.

[Prasant Rai]

Hello There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.tg-item-overlay {
    background-color: #ddd !important;
}

Let us know how it goes.

Thanks.

[mahmoud237]

No, it didn’t work .. let me clarify.

I have two backgrounds … You can see it on attachment (1) & (2)

I put an image (3) on the background (1) … see the image on attachment.

Here is what I want :

I want when I hover on image (3) the background change from (1) to (2)

thanks,

[Rupok]

Hey there,

Thanks for writing back! Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[mahmoud237]

I understand that …but I’ll make it easier so you can help me on it.

is there a way to change an image or background while hover on it … it is that simple no need to complex things like my first inquiry .

Thanks again for you support .. I appreciate that 🙂

[Joao]

Hi There,

Please add the following code and change the image URL for the desired image.

.home #x-section-1:hover {
background-image: url("https://www.wellesleyfreelibrary.org/wp-content/uploads/2016/06/space-1.jpg") !important;
}

Hope it helps

Joao

[mahmoud237]

Thanks a lot … it’s worked 🙂

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[mahmoud237]

How can I add a fade effect to the second background when hover in it … I tried some coding but it didn’t work for me

[mahmoud237]

This reply has been marked as private.

[Friech]

Hi There,

You can add the opacity property on the given.

.home #x-section-1:hover {
    background-image: url("http://www.georgantasdesigns.com/wp-content/uploads/2016/08/6.png") !important;
    opacity: 0.75;
}

Hope it helps, Cheers!

[mahmoud237]

Thanks but what I mean by fade I mean slowly appear

[Rue Nel]

Hello There,

Thanks for the updates! If you want it to fade slowly, please update the css code and use this instead:

.home #x-section-1{
    opacity: 1;
    transition: opacity 1s linear;
}

.home #x-section-1:hover {
    background-image: url("http://www.georgantasdesigns.com/wp-content/uploads/2016/08/6.png") !important;
    opacity: 0.75;
}

Please let us know how it goes.

[mahmoud237]

it is the same effect as before … I want it to fade slowly like fade in .

Thanks

[Author]

Posts