Home>Support>Image Hover Effect

Image Hover Effect

By Joshua Grady, 7 years ago. Last reply by Alex S, 7 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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 6 months ago Alex S
    Hi, I Work Here

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More