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
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?
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
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.
Hi Alex,
Thanks so much — that worked great!
Meg
Hi Type Monkeys,
Great to hear! Is there anything else I can help you with today?
Good for now — thanks so much, Alex!