Adding opacity to next/previous images in slideshow reel

Site URL: https://www.chrisjjones.co/colour-work

I am trying to add opacity to the next / previous images in a slideshow reel. Whilst keeping the selected image at full opacity.

This is the code I am entering into page advanced custom code box:

<style>
.gallery-reel-item: next {
  opacity: 0.5;
}

.gallery-reel-item: previous {
  opacity: 0.5;
}
</style>

it is not working. Any help much appreciated. Thanks.

53 minutes ago, cjjonesyc said:

Site URL: https://www.chrisjjones.co/colour-work

I am trying to add opacity to the next / previous images in a slideshow reel. Whilst keeping the selected image at full opacity.

This is the code I am entering into page advanced custom code box:

<style>
.gallery-reel-item: next {
  opacity: 0.5;
}

.gallery-reel-item: previous {
  opacity: 0.5;
}
</style>

it is not working. Any help much appreciated. Thanks.

You can try adding to Home > Design > Custom Css

.gallery-reel-control-btn {
  opacity: 0.5;
}

Let me know how it works on your site

My testing

1 hour ago, bangank36 said:

You can try adding to Home > Design > Custom Css

.gallery-reel-control-btn {
  opacity: 0.5;
}

Let me know how it works on your site

Thank you for your reply, but I am referring to the next / previous 'images' not the buttons.

Ops! you can use this code for instead

.gallery-reel-item:not([data-active="true"]) {
  opacity: 0.5;
}

My new testing

36 minutes ago, bangank36 said:

Ops! you can use this code for instead

.gallery-reel-item:not([data-active="true"]) {
  opacity: 0.5;
}

 

Perfect, thank you so much!