Overlay opacity

same problem here.how to solve it without touching the plugin files?

This should work, it’s in use on my dev website: https://site01.profoliolive.com/wp-gallery/ Just cut and paste into your custom CSS file.

/******************* BASIC LIGHTBOX SETTINGS ********************/

/* Overlay sets the color and opacity of background behind the image. */
#overlay {
background-color: #fff !important;
opacity: .95 !important; /* You can also add an opacity effect by setting the opacity anywhere from .1 to 1 */
}

/* Set the color for the animated background behind the image which results in an 8px border. */
#outerImageContainer {
background-color: rgba(0, 0, 0, .1) !important; /* Use 'rgba(0, 0, 0, .0)' if you don't want a border, otherwise use any rgba or #color. */
}

I just realized that my code won’t give you the same look if your #overlay is “stuck” at 1.

Go to you plugin folder and open wp-jquery-lightbox then styles. Open lightbox.css and go to line 115 or search the page for #overlay. Check the code, it should be:

#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10090;
	width: 100%;
	height: 500px;
	background-color: #000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	display: none;
	}

Make sure your default is what’s above. Then add the code I provided in last post to your custom CSS file. If you have to make a change, make sure you make the same change in lightbox.min.css file.

Thank you Chris.
However, your solution doesn’t work for me even though the #overlay CSS is at 0.6.

The plugin javascript is adding some inline styles (that I couldn’t override via CSS) that is setting opacity to 1… :-/