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.

Image Hover Effect

Resolved 1 reply pluginplugin-siteorigin-csstechnical
Joshua Grady
8 years ago · Last reply by Alex S 8 years ago

Hi –

I added the following code:

.so-widget-sow-image img {
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}

.so-widget-sow-image img:hover {
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-ms-filter: brightness(50%);
filter: brightness(50%);
}

I would recommend the third party plugin, SO Page Buil

however – It adds this to every image on the site.

I love the effect but only want this on certain images… How would make a Hover Effect apply to single images only?

Thanks!

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

Need fast email support? Get SiteOrigin Premium

Replies

1
  1. Alex S Staff 8 years, 10 months ago

    Hi Joshua,

    You can change this with some custom CSS. Please repalce the CSS with:

    .sow-image_darken .so-widget-sow-image img {
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}

.sow-image_darken .so-widget-sow-image img:hover {
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-ms-filter: brightness(50%);
filter: brightness(50%);
}

    Then please open the SiteOrigin Image widgets you wish to apply this styling to or open the row if it’s a series of images in a single row. Head over to the row/widget styles sidebar and open the Attribute settings group. Set the Row/Widget class to sow-image_darken and then save.

    How does that look?

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