Hi, I saw that exists a lot of plugins to make image hover effects, and some of them are specific to Elementor, Visual Composer…
Do you recommend anyone that is more compatible with siteorigin pagebuilder?
I just want to make a black white image to turn into color when mouse is over.
BTW, I’m using Bramble theme, as you recommended some time ago. Very good! I’m really enjoying it. =) But Vantage is still my favorite.
Hi Larissa
Thanks for reaching out and for your support.
SiteOrigin Premium includes the Image Overlay addon which is for displaying text on hover. https://demo.siteorigin.com/premium/image-overlay/.
The following tutorial shows how grayscale images but in reverse https://thewphosting.com/add-grayscale-hover-effects-images-wordpress/.
Add to Custom CSS:
.bw img { -webkit-filter: grayscale(100%); /* For Webkit browsers */ -webkit-transition: .5s ease-in-out; /* For Webkit browsers */ -moz-filter: grayscale(100%); /* For Firefox */ -moz-transition: .5s ease-in-out; /* For Firefox */ -o-filter: grayscale(100%); -o-transition: .5s ease-in-out; } .bw img:hover { -webkit-filter: grayscale(0%); /* For Webkit browsers */ -webkit-transition: .5s ease-in-out; /* For Webkit browsers */ -moz-filter: grayscale(0%); /* For Firefox */ -moz-transition: .5s ease-in-out; /* For FireFox */ -o-filter: grayscale(0%); -o-transition: .5s ease-in-out; }Edit the widget concerned and open the Attributes tab on the right, enter the following into the Widget Class field:
Andrew, you are lovely!
I searched a lot over the web, and didn’t find this post you sent me.
The code works perfectly! I’m trying to give a minimalism look for the frontpage, and as the id is black&white, this function on the front page images turn it to be very elegant.
About the image overlay, good to know about this function, I don’t need it right now in any project, but if it’s in need, I know I can count with SiteOrigin solutions.
I was recommend your products in other communities (WordPress Brasil, and others on Facebook). And even when people says that Elementor or Visual Composer are good, I still think Pagebuilder is the best one.
Thank you.
Super, I’m really glad to hear the CSS rules help with the desired image look and hover interactions.
Thanks so much for your support and for sharing SiteOrigin products.
As questions arise in the future, please, let us know.
Cheers for now :)