This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Widget class hover

Open 3 replies pluginplugin-page-builder
adiwbtp
10 years ago · Last reply by Magus 10 years ago

Hello there,

I use Page Builder and having problems with Attributes > Widget Class > CSS Styles

I have put head on Widget Class and put

.head {
background-repeat: no-repeat;
background-position: center top;
background-image: url(https://www.karistakrishna.com/wp-content/uploads/2015/05/ring-bg.jpg);
}
.head:hover {
opacity: 0.4;
filter: alpha(opacity=40);
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out; }

But it’s not work, the background goes up and left about 25px. When i remove the .head:hover {} it’s working fine. Please advise. Thank you

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

3
  1. Magus Staff 10 years, 9 months ago

    Hi Adiwbtp

    Would you please mind linking to a page where this is happening and re-adding the hover code to your CSS.

    Thank you

    Magus

  2. adiwbtp 10 years, 9 months ago

    Hi Magus,

    The link is http://www.karistakrishna.com/collections/rings-2/

    Widget Class: head
    CSS Styles:
    .head {
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url(http://www.karistakrishna.com/wp-content/uploads/2015/05/ring-bg.jpg);
    }
    .head:hover {
    opacity: 0.4;
    filter: alpha(opacity=40);
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out; }

    The hover isn’t work. Please advise.

    Thanks,
    Adi
    —

  3. Magus Staff 10 years, 9 months ago

    Hi Adiwbtp

    Please try the following. Edit the row containing the background image. Clear all settings from the CSS styles dialog and save the page.

    Navigate to your custom CSS editor. If you do not have one I would recommend using this one.

    https://wordpress.org/plugins/simple-custom-css/

    Once you are in the Custom CSS Editor please add the following

    .head {
 background-repeat: no-repeat;
 background-position: top center;
 background-size: cover;
 background-image: url(http://www.karistakrishna.com/wp-content/uploads/2015/05/ring-bg.jpg);
 }
 .head:hover {
 opacity: 0.4;
 filter: alpha(opacity=40);
 transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -webkit-transition: opacity 1s ease-in-out; }

    Let us know how you get on

    Magus

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread