Docs    Instagram    Customizations

Change the Opacity of the Hover Overlay

You can change the opacity of the hover overlay (when hovering over an image, the expand icon, date, user info, etc. that appears) with this snippet of CSS.

Add the following to your preferred custom CSS location or stylesheet. One option is the default additional CSS location found at WordPress Dashboard > Appearance > Customize > Additional CSS.

#sb_instagram .sbi_item .sbi_link {
  visibility: hidden;
#sb_instagram .sbi_item:hover .sbi_link {
  visibility: visible;
  background: rgba(0,0,0,.3) !important;

The yellow number represents the opacity. You can also alter the “0,0,0” part of that line of code to change the color of the background of the element.


Couldn’t find your answer in the docs?

Contact Support

Was this article helpful?