hover logo CSS

This topic has 3 replies, 2 voices, and was last updated 6 years, 4 months ago by Elise Noromit.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
January 9, 2019 at 10:49 am #100908

icecreme
Participant

Hi, Dear Xtemos,

Since our website has two trademarks, so we need to DIY our Logos. can you pls tell me how to use the mouseover(hover) Event to change the logos? Such as CSS mode.

like this: https://www.tutorialrepublic.com/codelab.php?topic=faq&file=css-image-swap-on-hover

I have found one solution from StackOverflow:
.img-div {
background-image: url(‘logo.png’);
height : <logo-height>
width : <logo-width>
}

.img-div:hover {
background-image: url(‘logo2.png’);
}

can we do that with Woodmart?

best regards
Andy

January 9, 2019 at 12:09 pm #100926

Elise Noromit
Member

Hello,

The logo is not a background, it is an image so it is not possible to do that.

As an alternative, you can create any block in HTML, assign a class to it and write the styles you mention. Then navigate to the Header Builder and put the HTML block in the place where you have the logo

1. Create HTML with a row and assign the class https://xtemos.com/docs/woodmart/html-blocks-2/

2. Navigate to Header builder insert the HTML Block built with WPBakery

3. Write CSS code and insert it in the Theme Settings > Custom CSS.

Best Regards

January 9, 2019 at 1:58 pm #100944

icecreme
Participant

Thank you for your quick reply. could you pls write a shortly HTMLBlock for me? because I don’t want to break the existing woodmart settings because it’s already perfect. Thank you for your great design.

January 9, 2019 at 4:14 pm #100968

Elise Noromit
Member

Hello,

HTML block is WP Bakery page builder, just add a row https://wpbakery.com/video-academy/add-row-column-wpbakery-page-builder-wordpress/

Best Regards
Author

Posts

Tagged: hover logo

Viewing 4 posts - 1 through 4 (of 4 total)

hover logo CSS

Create your WordPress website.