Talk to me about anything. If you’d like to work with me, or
even if you just need a hug, I’ll get back to you shortly.

Please enter your name

Please enter a valid e-mail

It's cold!

Say something!

Transify – a jQuery plugin to easily apply transparency / opacity to an element’s background

In my search for a solution to make a background / border of an element transparent, I found that there really isn’t a perfect one that fit a particular need. IE6, IE7, and IE8 do not support CSS3′s alpha background color value nor do older versions of other browsers, 8-bit PNG’s do not look great in Internet Explorer, and other javascript PNG fixes are not great for performance nor will they work on elements with repeating backgrounds. So, I’ve written a great and easy to use solution in the form of a jQuery plugin.

Features

  • Make any element’s background or border transparent without effecting everything inside the element
  • Quick, easy, small footprint
  • Works in all browsers
  • Control over opacity
  • Works with background colors, background images, and borders (if you want to use CSS3 border-radius, you’ll need to apply your own CSS values to the div that is created, it has a class of ‘transify’)
  • Easily make background animate opacity on hover
  • Verified with jQuery 1.4.3, but should work fine with older versions

How to use

It’s a simple plugin, but satisfies the need to easily and quickly make an element’s background and/or its border transparent, while leaving all of its children elements and content at 100% opacity. It’s extremely small, less than 2KB while minified. What the plugin essentially does is creates a second div inside of the element that you specify, giving it a lot of the same CSS properties of your selected element and places it behind your element in the z-index. This works in all browsers that I’ve been able to test, and it also works with background images. Not only that, but I’ve added the functionality for you to provide two opacity settings which will automatically give the background a fade transition on hover, which you can view on the demo.

By default, the plugin will give your element’s background and border 60% opacity when no other settings are defined. To run it, just use a normal jQuery selector to select your element, this example gives the element with an id of ‘selector’ a 60% transparency.

$('#selector').transify();
Other options you can set include:
  • opacityOrig - this will change the opacity of the element, default is 60%
  • opacityNew - if you assign this a value, then the element will do a fade animation from what you set as the opacityOrig to this opacity
  • fadeSpeed - pretty self explanatory, if you want to change the speed of the animation from it’s default of 600 than give this a value
  • percentWidth – since neither jQuery nor javascript have a very elegant way of determining whether you gave your element a width in pixels or percentage with CSS, you’ll need to assign this option a value in order to use widths in percentages instead of exact pixels.
Example with some more settings:
$('#selector').transify({
   opacityOrig:.2,
   opacityNew:.8,
   fadeSpeed:1000,
   percentWidth:'100%'
});

These options will give your element’s background and border a 20% opacity, which will animate to 80% opacity when hovered with a speed of 1000, and will also extend the full length of the browser with a 100% width.

74 Comments
  1. gav says:

    Nice jQuery plugin, however it is causing a CSS warning in Firefox…

    Warning: Unexpected token in attribute selector: ‘!’.

    Is this plugin still supported?

    • Joren Rapini says:

      I’ll have to check that out, thanks for the heads up. I haven’t done a ton of testing with this one, so there may still be some bugs.

      • gav says:

        I have a feeling it might not be your script. It might be related to the jQuery v1.4.2+ and Firefox issue. I recently upgraded a WordPress from 3.0 to 3.1 and I think they changed the default jQuery included.

  2. Ruan says:

    It works well, except if you change the content of the transified div afterwards. Then transify stops working completely.

  3. Ruan says:

    Hmm, and even if you call it again on the same div afterwards, nothing happens.

  4. Jaime says:

    Thank you it worked like a charm

  5. Steve says:

    I’m experiencing a strange issue that I think may be related to the plug-in. Occasionally, especially after clicking a hyperlink, the page loads but some of the styles defined in the external stylesheet don’t get applied. Interestingly, some do get applied though. I can then click the refresh button and it loads correctly every time. It works correctly every time with the plug-in disabled.

    I too have experienced the issue Ruan mentioned. I didn’t think it would be much of a problem at first but it turns out to be a bigger issue for me than I originally thought.

    I’m working on a new design and I’ve only tested in Safari at this point so I don’t really have much more to offer yet. I’ll post a reply if I discover anything I think would be helpful.

  6. Steve says:

    Oh, also. It seems you mis-typed opacityNew in your example with more settings code. You have it spelled opactiyNew. Just don’t want that hanging anyone up.

  7. Matt says:

    I simply cannot get this to work for the life of me.
    I have never used jQuery but I fairly certain I am doing it correctly.

    I have included jQuery and Transify in the head of my page.

    (Yes, path and file-name are correct)
    HTML is as follows:

    $(‘#opacity80′).transify({
    opacityOrig:.8,
    percentWidth:’100%’});

    Left Sidebar


    This space is reserved for, I dunno. Something.


    Center Div

    Right Sidebar

    CSS is as follows:

    .container {
    background-color:#FFF;
    width: 80%;
    max-width: 1260px;
    min-width: 1024px;
    margin: 0 auto;
    margin-bottom:5%;
    border: 1px solid #EFEFEF;
    -moz-border-radius: 25px 25px 25px 25px / 25px 25px 25px 25px;
    -webkit-border-radius: 25px 25px 25px 25px / 25px 25px 25px 25px;
    border-radius: 25px 25px 25px 25px / 25px 25px 25px 25px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    overflow:hidden;}

    What exactly am I doing wrong? Thanks.

    • Matt says:

      Well, since all of my code was absorbed you cannot see my entire post, so delete it (and this) if you will, it serves no purpose aside from redundancy.

  8. fox says:

    Nice plugin! Thx for the job well done ;-)

    I extended your version for my own use, but might be usefull for others as well…

    As I only want the effect of a transparant overlay on the background (and not the borders) I added a new optional paramter in the default settings ‘backgroundOnly: 1′ (so defaults to: apply this effect only on the background)

    Then in the css of the ‘transBG’, I make the border settings depending on the parameter’s value.
    The same goes for the css of ‘$this’. The ‘border:’none” is depending the same paramter’s value.

    I also experienced some issues -with the borders included- when the div on which you apply the ‘transify’ method, is defined as floating, nested in another div, the margins (or the layout in general) of this floating div are altered…? This isn’t the case after my edit on your script and used for the background only.

    Here is my version:
    var defaults = {
    opacityOrig: .5,
    fadeSpeed: 600,
    backgroundOnly: 1
    },
    settings = $.extend({}, defaults, options);

    this.each(function () {
    var $this = $(this);
    $this.append(”);
    var transBG = $this.find(‘.transify’);
    transBG.css({
    backgroundColor: $this.css(‘backgroundColor’),
    backgroundImage: $this.css(‘backgroundImage’),
    backgroundRepeat: $this.css(‘backgroundRepeat’),
    position: ‘absolute’,
    top: 0,
    left: 0,
    zIndex: -1,
    width: $this.width() + parseInt($this.css(“padding-left”), 10) + parseInt($this.css(“padding-right”), 10),
    height: $this.height() + parseInt($this.css(“padding-top”), 10) + parseInt($this.css(“padding-bottom”), 10),
    opacity: settings.opacityOrig
    });
    if (settings.backgroundOnly == null || settings.backgroundOnly != 1) {
    transBG.css({
    borderTopColor: $this.css(‘borderTopColor’),
    borderTopWidth: $this.css(‘borderTopWidth’),
    borderTopStyle: $this.css(‘borderTopStyle’),
    borderRightColor: $this.css(‘borderRightColor’),
    borderRightWidth: $this.css(‘borderRightWidth’),
    borderRightStyle: $this.css(‘borderRightStyle’),
    borderBottomColor: $this.css(‘borderBottomColor’),
    borderBottomWidth: $this.css(‘borderBottomWidth’),
    borderBottomStyle: $this.css(‘borderBottomStyle’),
    borderLeftColor: $this.css(‘borderLeftColor’),
    borderLeftWidth: $this.css(‘borderLeftWidth’),
    borderLeftStyle: $this.css(‘borderLeftStyle’)
    });
    }
    if (settings.percentWidth) {
    transBG.css(‘width’, settings.percentWidth);
    }
    $this.css({
    zIndex: 10,
    position: ‘relative’,
    background: ‘none’
    })
    if (settings.backgroundOnly == null || settings.backgroundOnly != 1) {
    $this.css({
    border: ‘none’
    })
    }
    if (settings.opacityNew) {
    $this.hover(function () {
    transBG.stop().animate({ opacity: settings.opacityNew }, settings.fadeSpeed);
    }, function () {
    transBG.stop().animate({ opacity: settings.opacityOrig }, settings.fadeSpeed);
    });
    }
    });
    return this;

  9. I was just looking for this info for some time. After 6 hours of continuous Googleing, at last I got it in your web site. I wonder what is the lack of Google strategy that don’t rank this kind of informative web sites in top of the list. Generally the top web sites are full of garbage.

  10. Janeks says:

    Hi! First – thank you very much for this :)
    just i’m stock – the problem is a content area which comes transparent before was with rounded corner, now it’s like square…why that? thank you!

    • Joren Rapini says:

      Hey Janeks, jQuery doesn’t handle CSS3 things like border radius because it does not work in every browser. I mention this in the article – “Works with background colors, background images, and borders (if you want to use CSS3 border-radius, you’ll need to apply your own CSS values to the div that is created, it has a class of ‘transify’)”

  11. Kevin says:

    I am trying to use the script on a div that overlaps another div. The transparency effect seems to work, but, unfortunately, it bumps the div up above the div I have it set to overlap. Any idea how to keep this from happening?

  12. Jessica says:

    Thank you! This solved my dilemma of keeping the text opacity 100% while utilizing a simple jQuery script for rounded corners and assigning the transify class to it. I appreciate you providing this awesome code!

    • Khaez says:

      Hi,
      could you provide a sample of how you made rounded corners. As im trying to figure out how to do it. Im quite new to jquery and all, so your help is greatly appreciated.

      Thanks.

      • Joren Rapini says:

        Khaez, you can do it just by applying CSS3 border-radius to the .transify element. (although, that won’t work on older versions of IE)

  13. j says:

    Great plugin! I’m a noobie and would like to know how do I add this to my wordpress theme’s CSS code for a transparent background?

    All I’ve already is added the JS files to the JS directory. A step by step explanation would be sincerely appreciated.

  14. engin murat says:

    how to remove hover section ?

  15. engin murat says:

    $this.hover(function ()

  16. engin murat says:

    my find solution.
    remove fadespeed

  17. enginmurat says:

    mozilla 4.0 css problem all background transparent why ?
    i can make only sidebar transparent

    thank you

  18. jagall says:

    great plugin, used in my footer just what i was looking for soooo thank you v much

  19. hubi says:

    Just a great plugin!
    I experienced the rounded corner problem in chrom (iron).
    The hint to create a class in css fixed it.

    Thank you very much!

  20. hubi says:

    any chance to use this with $(‘li’).hover?

    was trying this way

    $(“li”).hover(
    function () {
    $(this).transify({opacityOrig:.45}));
    }
    );

    didnt work. any help any ideas? :)

    regards

    • Joren Rapini says:

      hubi, please follow the instructions in this article. I go over how you can set an original opacity and a hover opactiy. Also the demo shows how this is done. Thanks!

  21. whoadan says:

    I have a long wrapper div around my main content elements which is about 800px in width. so you can see the body behind it. I made my body background black, and the wrapper background white, and did transify() on the wrapper. It works near the top but it seems as I scroll down the page it ends up being 100% invisible towards the bottom half of the page. Any ideas? Thanks! Great plugin!

    • whoadan says:

      ah of course as soon as I posted a question I figured it out. I had other things happening after the transify() call that loaded additional images and things, an transify() didn’t resize the opacity after more content was loaded. I moved the transify() call from $(function(){} to $(window).load(function(){ } so everything was completely loaded before calling it.

  22. hubi says:

    hi there,
    there might be a mistyping in transify-min.js
    semikolon is missing after

    if(c.percentWidth){e.css(“width”,c.percentWidth)}

    this should be
    if(c.percentWidth){e.css(“width”,c.percentWidth);}

    additional hint: if you need the height in percent as well, just add:

    if (settings.percentHeight) {
    transBG.css(‘height’,settings.percentHeight);
    }

    usage in html

    $(‘#div’).transify({opacityOrig:.16, percentHeight:’100%’});

    thanks again for the great work!

  23. Jonathan says:

    Hi Joren,
    Thanks so much for this. I found it from your post over at http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text

    All the methods offered there were making my head spin. Word of your solution was music to my ears.

    I’m trying to incorporate it into a wordpress framework. Should be pretty straight forward. The framework is pagelines.

    I have put into the area where the framework allows me to add custom code to the header.

    Then I have put:

    $(‘#page-canvas’).transify();

    into various locations, all to no avail. I can add custom code to CSS, Head, and footer.

    I am wondering this is something I am doing wrong, or if I am trying to implement it incorrectly? Any suggestions would be greatly appreciated.

    Jonathan

    • Joren Rapini says:

      The first thing I’d do is check to make sure there aren’t any errors with either Firebug or Chrome’s console. Maybe you’re not loading all of the scripts properly? I’d need a link to give you any other advice.

      • Jonathan says:

        Thank Joren,
        There was an error, but I resolved that now. Was due to the script being placed before call to jquery itself.

        I’ve still not got it working though.

        The site is http://www.marieamma.com
        I’m not sure what timezone you are in. I am in Switzerland and I am fiddling with the site all day today… so there is no saying what state it will be in if and when you take a look at it.

        One that I am not sure about is where do I actually place the transify jquery selector? Into the CSS for the element in question? Or somewhere else?

        Cheers,

        Jonathan

      • Joren Rapini says:

        What else are you trying to make transparent? It looks like your content already has a transparent background. I looked at your code, and you’re not actually attaching the plugin to any elements, all you’ve done is load the script. Please follow the tutorial – you need to add the code somewhere after the element you want to attach it to has loaded. Download the demo files if you are still confused.

  24. I think other site proprietors should take this website as an model, very clean and excellent user friendly style and design, let alone the content. You are an expert in this topic!

  25. Andreas says:

    Hi, useful easy to use plugin, thanks for making it available. However, it seems not to work with jQuery Isotope or Masonry; the layout within elements gets mangled, also if a .transify class is used to apply round corners to transified elements. Anyone else noticed and maybe resolved this?

  26. strepsil says:

    I added:

    backgroundPosition: $this.css(‘backgroundPosition’),

    ..and it worked a charm for me!

  27. M says:

    Great plugin. The only thing that should be added in the instructions on this page is that the stuff needs to go below the div, otherwise it won’t work (well, in Firefox anyway)

    • Joren Rapini says:

      M, anytime you load javascript, it has to be lower in the DOM than the element that you are interacting with. If you need to place script at the top of the page for whatever reason, you can prevent it from loading until the rest of the page is done loading by placing everything inside $(document).ready(function() { });

  28. r says:

    Hi,
    I have a div where i apply transify. Inside that div, i have another (empty) div where i output results through ajax (on click). How do i make transify to resize the transparency on the parent div?

    • r says:

      i mean, if the main div is resized, transify won’t work…

      • Joren Rapini says:

        You’d have to rerun the Transify function on your ajax callback in order for it to resize, either that or if you are doing an animation then you’d have to animate the transify div that is created at the same time.

    • r says:

      thanks for your answer.
      if i callback, it is created a second div class=’transify’, below the first. any other advice?

    • r says:

      for some reason, after removing and applying transify, the div class=”transify” looses it rgb(255,255,0).

      I found another way to solve my problem not using transify, but it’s a great plugin anyway.
      Thanks!

  29. Michael says:

    Hey!

    Thanks for creating this!

    Is it possible to run the script for several elements at the same time?
    I have five elements using the same #tag, but the script only applies to the first one.

    • Joren Rapini says:

      Using more than one element with the same ID on the page is not valid HTML and will fail in more ways than just this. You’ll need to make new IDs.

      • Michael says:

        Thanks! I didn’t know that.

        I had problems with the seperate divs but that was floating-related. It all works now!

  30. Ross says:

    Hello Joren,

    I noticed an odd problem with transify. My code (http://jsfiddle.net/mhFxf/982/) works properly when transify is not enabled; however, when I enable it proper div stacking fails, causing the wrong elements to be on top of each other.

    In this example, #mastarticledescription is stacked above both #articletitlemain and .stylebar1, despite z-indexing that describes otherwise.

    Any thoughts?

    P.s. Thanks for a great plugin, which I’ve used for a while now.

  31. Its a to much awesome article……..and Thanx to everyone…………..

  32. Emily says:

    This plugin is PERFECT. Thank you! =)

  33. kiwi2b says:

    Hi Joren, Looks great on the demo, wish it was working on my site!

    I have added transify.js to the folder, put the code into the header and body, double checked, aaaand nothing. Still an opaque background image. Followed tutorial, looked at demo and source.

    My code is <script src=” in the header and this in the body after the div…

    $(‘.art-content-layout’).transify();

    Website: tannery.commun ityspot.org.nz (no spaces)

    Has to be an easy error, but what?? Thanks in advance for ideas!

    • Joren Rapini says:

      I can at least point you in the right direction. According to chrome console (always check for errors when troubleshooting!) $(‘.art-content-layout’) is null, meaning it’s not finding anything there. Maybe your jQuery noconflict mode? Try jQuery(‘.art-content-layout’)?

  34. kiwi2b says:

    Ummm… me again. So close!

    I’m noticing my website seems to be applying the transparent background twice! You can see the effect at the url. Where they overlap it shows as more opaque, which is why I noticed.

    The template uses a class, and repeats it twice on the page, so transify gets repeated twice. If I delete (via firebug) one of the instances of transify, the problem is fixed.

    So, if this actually is the cause, any way to limit the effect to being applied just once per page, even though the class it is attached to appears more than once??

    The html…

    div id=”art-main”>

    ….

    • Joren Rapini says:

      Maybe I’m missing something (wordpress cut out your html too), but just use a different ID/class on the elements you actually want to be transparent?

      • kiwi2b says:

        Hi there,

        Not sure I can. It seems the template sets up with one use of the class, then calls it again for each time a module is used by the website.

        Here’s the html/php from the file again, with some xx’s added to allow posting…

        position(‘banner2′, ‘art-nostyle’);
        if ($view->containsModules(‘breadcrumb’))
        echo artxPost($view->position(‘breadcrumb’));
        echo $view->positions(array(‘user1′ => 50, ‘user2′ => 50), ‘art-article’);
        echo $view->position(‘banner3′, ‘art-nostyle’);
        echo artxPost(array(‘content’ => ”, ‘classes’ => ‘ art-messages’));
        echo ”;
        echo $view->position(‘banner4′, ‘art-nostyle’);
        echo $view->positions(array(‘user4′ => 50, ‘user5′ => 50), ‘art-article’);
        echo $view->position(‘banner5′, ‘art-nostyle’);
        ?>

        jQuexx(‘.art-content-layout’).transify();

  35. kiwi2b says:

    Hmm, this time with that code. The position(‘banner2′, ‘art-nostyle’);
    if ($view->containsModules(‘breadcrumb’))
    echo artxPost($view->position(‘breadcrumb’));
    echo $view->positions(array(‘user1′ => 50, ‘user2′ => 50), ‘art-article’);
    echo $view->position(‘banner3′, ‘art-nostyle’);
    echo artxPost(array(‘content’ => ‘/jdoc:include type=”message” /’, ‘classes’ =/ ‘ art-messages’));
    echo ”;
    echo $view->position(‘banner4′, ‘art-nostyle’);
    echo $view->positions(array(‘user4′ => 50, ‘user5′ => 50), ‘art-article’);
    echo $view->position(‘banner5′, ‘art-nostyle’);
    ?*
    */dxv*
    */dxv*
    */dxv*
    */scxxpt type=”text/javascript”*
    jQuery(‘.art-content-layout’).transify();
    */scxxpt*
    */dxv*

    • kiwi2b says:

      Okay, all perfect now. Good advice, and now followed… “use a different ID/class on the elements you actually want to be transparent”. Do, did, done!

      Thanks again for this!

  36. Ben Green says:

    Just a suggestion, i’ve not read all the comments so someone may have said it before – i’ve added in the line:

    backgroundPosition:$this.css(‘backgroundPosition’)

    to my file (slightly different as i’ve edited the minified version) as it reset background position to default.

    it may be worth adding this into a future build?

    Regards

  37. pixibuex says:

    Hi,

    I would like to use transify on a responsive website. When the window is resized the content width changes but transify background doesn’t adjust to the new width. I’d appreciate if you could suggest a fix. Thanks in advance.

  38. Thanks, that helped me a lot.
    I was all set as transparent and just hover the mouse with color, but then I saw this article, I left unset and all the colors opaque when mouseover, diminished entire opacity.
    Sensational!

  39. Ayac says:

    Hi,

    I use curvyCorners to make my div-s curvy. Is there a way to use your script and curvy corners at the same time? Because I tried many things but it works only one way or the other. SInce curvyscript works in many browsers, it would be a great combo if your script could be joined with it.

    Or I just need to use a different reference name in my curvyscript and that is it? If I apply your script on my divs, then curvycorner does not work.

    Here is my curvycorners code reference:

    $(‘#mycurvydiv’).transify({opacityOrig:.5,opacityNew:.85,fadeSpeed:200});

    curvyCorners.addEvent(window, ‘load’, initCorners);
    function initCorners() {
    var settings = {
    tl: { radius: 8 },
    tr: { radius: 8 },
    bl: { radius: 8 },
    br: { radius: 8 },
    antiAlias: true
    }

    curvyCorners(settings, “#mycurvydiv”);
    }

  40. wzodnkpsfosbqjoj, Plantiffs who won their viagra lawsuit in court in 2010, kczAZTr, [url=http://ksamft.org/]Viagra[/url], lghOpmb, http://ksamft.org/ Viagra, Dfnvjuj.

  41. Chris says:

    Hello Joren,
    Not sure if you are still following this, I see the last post was 2 years ago, but here goes. I’ve set up the script and the .js file and all works perfectly. Now I’m trying to get my border-radius back. You say “you can do it just by applying CSS3 border-radius to the .transify element.” Does this mean just add it as a property to the existing list for that element? So, in your demo example, add it to the content1 list like this? #content1, #content2 {background:#fff; border:4px solid #999; margin:100px auto 0; height:300px; padding:50px; width:300px; border-radius:28px;} My guess is this isn’t what you mean because that doesn’t work. In other words, is “#content1, #content2″ the .transify element or is that something else? Thanks

Leave a Reply