SiteOrigin Image: Add shadow on hover for some specific images

Hi,

I have tried several methods to add shadow to a a set of images on a specific page: http://cdp.duxifolio.com/portfolio/

I had a look at the forums and found some solutions that work partly.

1. Adding custom CSS
When I add following custom CSS, I do indeed get a hover effect on the images using the SiteOrigin Image widget:

.so-widget-image:hover {
opacity: 0.8;
box-shadow: 0px 0px 10px #ccc;
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
}

The result is that all images using the widget have a hover effect, including a page where I don’t want an image to have a hover effect.
– http://cdp.duxifolio.com/portfolio/ –> Hover effect works
– http://cdp.duxifolio.com/focus/ –> Hover effect works on this image too, but I’d like that one to remain normal, without hover effect.

2. Add CSS to a specific row (in order not to affect all pages)

Mouseover opacity on Picture

This looks like it’s the solution to my problem as it limits the CSS to a specific row.

However, when I try this, it doesn’t work…
I have tried adding “image-hover” to
Row styles > attributes > Row Class
Widget styles > attributes > Widget Class

… but none of them work

Thanks for your help