Jquery sliding overlays?

JavaScript
1

I am looking to be able to do something like this:
http://www.ferretarmy.com/files/jQuery/ImageOverlay/ImageOverlay.html

or this:
http://webbymaid.net/snippets/sliding-overlay.html

the difference however is that while I would like the overlay to be semi-transparent, i would like the text’s opacity to be 100%

is there a plugin that allows that?

2

This is a CSS issue. Unfortunately, child elements inherit opacity, so the <h3> and the <p> are inheriting the 0.8 opacity of the containing div.

In the first example you linked to, the opacity is being set in the imageOverlay.css file here (in red):

.image-overlay .caption
{
    float: left;
    position: absolute;
    background-color: #000;
    width: 100&#37;;
	cursor: pointer;
	[COLOR="Red"]/* The way to change overlay opacity is the follow properties. Opacity is a tricky issue due to
		longtime IE abuse of it, so opacity is not offically supported - use at your own risk. 
		To play it safe, disable overlay opacity in IE. */
    /* For Firefox/Opera/Safari/Chrome */
	opacity: .8;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";[/COLOR]
}

You could remove that code in red, and that will leave you with a black background and gray text—with no opacity at all.

If you are happy only to have background opacity in CSS3 capable browsers, you could try editing the jquery.ImageOverlay.min.js file. Near the end you see:

overlay_color:'#000'

You could try changing it to

overlay_color:'rgba(0,0,0,0.8)'

I’m not sure if that syntax is accepted in javascript, but it’s worth a try.