Hey there,
I’m a big fan of your Vantage Premium theme. I’m working on this super minimal site where the home page is just a big image that you click to take you to a product (hafxthree.com), but I’d like to make it more obvious that you should click the image. Could you help me figure out some css to add to CustomCSS that would make the image grow and darken upon hover? I’m using the Site Origin image widget for the image. Thanks for your help.
Hi Cameron,
Thank you for the extremely kind words.
I can help you with darkening the image on hover. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
.so-widget-sow-image 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 img:hover { -webkit-filter: brightness(50%); -moz-filter: brightness(50%); -ms-filter: brightness(50%); filter: brightness(50%);}I would recommend the third party plugin, SO Page Builder Animate plugin for more animations. You might also need to install the SiteOrigin CSS Editor.
By the way; as you’re a Vantage Premium user, you’re entitled to priority email support. If you would like to make use of that, please follow the instructions found on this page. Please reference this thread.
Awesome, that worked great. Very tasteful. Also, thanks for the heads up about SO Page Builder Animate; I was looking for something like that but only found Animate It! which didn’t seem to integrate well. It’s a great tool. I didn’t know about the email support, thanks! I will email directly with any future questions. Thanks for your help.
Hi Cameron,
Happy to help! :) Is there anything else I can help you with today?
No thanks, I’m all good!
hai,
iam using the north theme and page builder to create my site. i have arranged 5 images horizontally using image widget in a row . i would like to make a hover effect like a small bounce when mouse is hovered on to the image .is it possible to do that. i tried using image hover plugins but either its not free or dont have have options to size the image and its based on shot code. is there a css code that can added to css styles in image widget to give a small bounce effect when mouse pointer comes over that image … thank you … waiting for a reply
and in the above css code “1c389ca87c1a” code is it referring to the name of the image ??
Hi Gopu,
The “1c389ca87c1a” is directly related is unique to Cameron. I’ve updated the previous CSS so that it’s more generic and will work with any (SiteOrigin) image widget.
The animation effect you’re after however is, unfortunately, isn’t possible without a fair amount of custom coding (speicically this will require a JS). This is beyond the scope of what we can help you with on the forums, but you could hire a developer to implement this for you.
We highly recommend using Codeable.
Thank you Alex for the reply .