Hover Color Widget with bg image?

DanielNolan · May 2022

Hello

Is there a way to use your 'hover colour' widegt but have a background image display on hover instead?

I would just use the normal hover box, however this doesn't display content in the foreground does it?

Thanks

Pablo · May 2022

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

Thanks

DanielNolan · May 2022

Why does that make any difference? Surely the widget on my site, which is stedmundsadvertising.com by the way, is the same as the widget on every other site?

Pablo · May 2022

You want to show the link icon by default? I'm not sure which hover color widget do you exactly mean.

thanks

DanielNolan · May 2022

Thats OK Pablo, let me explain better... I'm sorry for not being clear enough.

On https://stedmundsadvertising.com/value-packs/ at the bottom of the page you will see 4 'Be-hover color' widgets. On hover the backgrounds change color. Can I use CSS to apply a background image on hover to the squares instead of a background color?

Pablo · May 2022

Yes, of course - but it will be not that easy - first of all, you have to add unique class or id for each element in settings of these items (to catch them with css and attach other image for each hover box).

Then, just apply this CSS code, this is universal code for all of them, it need to be changed a little bit to be unique for these elements.

.hover_color_bg:hover{
  background-image:url('https://stedmundsadvertising.com/wp-content/uploads/2022/01/DE-Pins-4-500x500.jpg');
 background-size:cover;
}

thanks

DanielNolan · May 2022

You are a star! Is there any way to hide the content/text on hover?

Pablo · May 2022

Of course, use this CSS code too.

   .hover_color_bg:hover p{
     opacity: 0;
   }

thanks

Hover Color Widget with bg image?

Comments