SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery sliding overlays?

    I am looking to be able to do something like this:
    http://www.ferretarmy.com/files/jQue...geOverlay.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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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):

    Code:
    .image-overlay .caption
    {
        float: left;
        position: absolute;
        background-color: #000;
        width: 100&#37;;
    	cursor: pointer;
    	/* 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)";
    }
    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:

    Code:
    overlay_color:'#000'
    You could try changing it to

    Code:
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •