Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
I tried to implement hover effect on so-widget-image, as per the below
.so-widget-image:hover {
display: block;
position: absolute;
z-index: 20;
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
but it is not working. can you help us to resolve
Hi Vijaya,
I’ve corrected your CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
.so-widget-image { position: relative; background: rgba(0, 0, 0, 0.8); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; top: 0;}.so-widget-image:hover { top: 5px;}You might also need to install the SiteOrigin CSS Editor.
hi
I tried to implement hover effect on sow-container-square, in square container am using background image as icon
.sow-icon-container sow-container-square : hover {
background: rgb(68,68,68);
}
but it is not working. can you help us to resolve
Hi Vijaya,
Your selectors are the issue. Without the class attached to sow-container-square text the browser will treat it as an element. Please try the following updated CSS.
If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor.
.sow-icon-container .sow-container-square:hover { background: rgb(68,68,68); }You might also need to install the SiteOrigin CSS Editor.