Hover Color Widget with bg image?

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

Comments

  • 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

  • edited 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?

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

    thanks

  • 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?

  • 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

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

  • Of course, use this CSS code too.

       .hover_color_bg:hover p{
         opacity: 0;
       }
    

    thanks

Sign In or Register to comment.