This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Mouseover using Page Builder

Resolved 6 replies pluginplugin-page-buildertechnical
type monkeys
10 years ago · Last reply by type monkeys 9 years ago

Hello,

I’m using Page Builder with Weaver Xtreme plus. I see where there’s a spot for css code in the SiteOrigin Image Widget, and I’ve tried copying code into that spot. I haven’t been able to get a mouseover to work, though.

I’m very inexperienced using css and html, so if you could tell me exactly what code I need to put where to do a simple mouseover/hover on an image that’s linked to another page, that would be great.

Many thanks for your help!

Meg

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

6
  1. Alex S Staff 10 years, 2 days ago

    Hi Type Monkeys,

    I can definitely help you with this. First off I need to know a couple of things about the hover effects you want. Is it going to be image specific? What do you want to happen on hover?

  2. type monkeys 10 years, 2 days ago

    Thank you for the quick response! The site we’re building on is liveterrific.com, and we’re looking for the 9 images at the bottom to have the hover/mouseover.

    As I mentioned above, they’re set up in SiteOrigin Image Widgets. We’d like them to have the effect like the “New Player” and “Returning Player” buttons here: https://www.playmonopoly.us.

    Also as noted, I’m really pretty clueless about how to do a lot of things, so really specific instructions would be GREAT.

    Thank you in advance for your help.

    Meg

  3. Alex S Staff 10 years, 1 day ago

    Hi Type Monkeys,

    I’ve had a look at your link and with how you’ve set them up – this isn’t possible sadly. If you want to mimic the effect you’ll have to convert the images to transparent PNG images – this isn’t something I can help you with sadly. However, all hope is not lost! I’ve got some alternative CSS that you could use instead to get a similar effect. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

    .so-widget-sow-image-sow-image-1c389ca87c1a a img {
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}
.so-widget-sow-image-sow-image-1c389ca87c1a a img:hover {
    -webkit-filter: opacity(.4);
    -ms-filter: opacity(.4);
    -moz-filter: opacity(.4);
    filter: opacity(.4);
}

    You might also need to install the SiteOrigin CSS Editor.

  4. type monkeys 9 years, 11 months ago

    Hi Alex,

    Thanks so much — that worked great!

    Meg

  5. Alex S Staff 9 years, 11 months ago

    Hi Type Monkeys,

    Great to hear! Is there anything else I can help you with today?

  6. type monkeys 9 years, 11 months ago

    Good for now — thanks so much, Alex!

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread