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
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
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
—
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