Grow your CSS skills. Land your dream job.

Inset Border Effect jQuery Plugin

Published by Guest Author

This is a guest post by Robin Thrift who wrote to me with some demo code for creating this effect. Together we turned it into a jQuery plugin. Enjoy!

I was browsing through a few Flash templates on ActiveDen when I came across an effect I see very often on Flash website galleries. It's a very simple but neat effect. The images have a border, but unlike CSS borders, it covers up part of the image. I wanted to use this effect in one of my galleries so I went ahead and experimented a bit and came up with the following jQuery plugin. It basically wraps the images in a <div> with the same dimension as the image and sets the overflow to hidden. Then it appends another <div> after the image, which the actual border gets assigned to. All the border properties can be altered by the user. It will work with almost any lightbox (tested with colorbox).

By combining the effects, new effects can be achieved and I noticed, that when used with a higher “inset” value, it gives you a really nice effect on the iPhone's web browser. Feel free to do whatever you like with this plugin.

View Demo   Download Files

How it works!

 

A huge thanks to Chris for editing and optimizing the plug-in and especially for posting this article!

Comments

  1. very nice woork thanks i wil add my page

  2. Permalink to comment#

    Nice plugin, thx Chris!

  3. Agos
    Permalink to comment#

    Just… why?

    • So that images can have inset borders that fade out as you hover over them, an effect that isn’t possible with CSS. Or have you figured out this effect is inappropriate for every single website in the entire world?

  4. This is a pretty neat effect, although I’d probably make the “borders” transparent as to still see most of the image.

  5. As ever a very robust and deep understanding of this example.

    Thanks Chris.

    Also, your demo page looks great.

    • Maybe another thing to mention, i hadn’t realised this was a guest author post the short note up never sunk in until coming back to this page.

      Thanks for the post Robin.

  6. i like the effect and always support JQuery..thanks…

  7. Permalink to comment#

    There you go with your uncanny ability to publish just what I need for a current project.

    It would be *really* cool if the borders could be somewhat transparent, so you could see part of the image. I haven’t seen this done (not even with css3), but maybe it can be? Using css3′s border-image and a .png?

    • You could set the opacity on the appended div to .9 or w.e.

    • div.ibe_inner { opacity: .5 !important; }

    • div.ibe_inner { opacity: .5 !important; filter: alpha(opacity = 50); /* ie only */}

    • Permalink to comment#

      You might also give the animated div a background, and therefore using an opaque png, you can accomplish the same affect. However, I totally agree with Alistair in that using CSS is probably superior in this case since you don’t have text inside you need to worry about (in which case you could use rgba also).

    • Permalink to comment#

      Duh, why didn’t I think of that…

      Here it is in action (I went without the transparency in the end):

      Not much, but a nice effect on a pretty basic site.

  8. Permalink to comment#

    nice trick using Overflow hidden for masking :-)

  9. Permalink to comment#

    wow neat and nice like final outcome [demo page] i will use this in future project thanks for sharing it :)

  10. sunny.by
    Permalink to comment#

    nice effect

  11. Permalink to comment#

    Very nice effect.

    Provides just that little bit of interactivity for users to know that an element “does something” when hovering.

    Thanks very much for sharing! =)

    Chris

  12. I like this effect, I decided to put my site in the picture into this effect!

  13. Hey Chris,

    Really neat effect thanks for sharing, this will definitely take over from my css sprites on images for a while! won’t be long until I build a whole website in jQuery.

    The big border would look awesome on a same coloured background, bit like a thumbnail effect. might have a play around with different transition effects but the fade look really works nicely.

    Thanks for sharing.

    • I like the thumbnail idea. Maybe, if you’d combine this effect with some resizing of the image, getting the top and left offset, position it absolutely and then make the whole thing bigger you’d have a neat little light box sort of effect.

  14. Permalink to comment#

    I like the effect so much

    Thanks:)

  15. tim
    Permalink to comment#

    priceless !
    thanks a lot chris :)

  16. albanion
    Permalink to comment#

    I learned a lot from your site.
    Thank’s Chris Coyier.

  17. Nice effect; good job Robin & Chris!

  18. Permalink to comment#

    I now I understand.

    Thank css-tricks.com

  19. That is a unique effect for image display. Thanks.

  20. where is my comment chris ?

  21. Permalink to comment#

    This is an awesome plugin. I can’t wait to take a glimpse at the code!

    • Permalink to comment#

      I’m not quite sure if this is the correct place for asking this question, but I had a look at the code and it’s awesome. I just had one question regarding it. How did you know to use the “mouseenter” event? Could you have used hover()?

    • I was using the new jQuery 1.4 element creation syntax, and you can’t really use “hover” as a part of that as far as I know. Hover isn’t a “real” event in JavaScript, it just maps to mouseenter and mouseleave anyway =)

  22. Permalink to comment#

    Couldn’t you avoid using double-divs, and instead just use the box-sizing: border-box; property instead?

    # -moz-box-sizing: border-box;
    # -webkit-box-sizing: border-box;
    # box-sizing: border-box;

    They had an article on it at nettuts, and it seems like that would have the same effect without the extra div.

    • Maybe? I don’t know that much about it. You can avoid DIV’s all together with Tim’s example above. Using jQuery though, it’ll be more cross browser capable than either of those techniques.

  23. Gourmador
    Permalink to comment#

    I just used Tim`s method. See here:

    http://www.openfieldimage.com/concept

    But I don`t like the thin lines (looks like a thin cross) across the images when you`re using Safari.
    Do anybody knows how to fix it?

    You don`t see those lines in Firefox.

  24. Permalink to comment#

    As always Chris, this site has an uncanny ability for making unexpectedly cool things happen. Thanks. Also, I would wager that css-tricks has the best demo page out there!

  25. Permalink to comment#

    This is awesome Chris. I’m going to use it for my current in-development theme :)

    • yeh i think it’s an effect that’s universal. used to go crazy with this sorta stuff in Flash.

      dare i say it, Flash is so much fun!

  26. David Becker
    Permalink to comment#

    Nice effect. With a bit of transparency, I think this would be great on an artist’s portfolio site. Hey, kind of like the one I’m currently working on… what a coincidence!

  27. Permalink to comment#

    nice one! ill be using this for our next project. Thanks!

    keep it up!

  28. SJ
    Permalink to comment#

    Very cool effect
    Superb

  29. Permalink to comment#

    very interesting,very fancy~

    CSS3 could achieve this effect in the future.

  30. ems
    Permalink to comment#

    Is anyone having issues with IE and linkable images using this plugin? I applied this plugin to my images that link to a sub page and in IE7 & IE8 the images are not clicking through to the the next page (just staying on the page no errors show up). Works fine in other browsers like FF (mac & pc), Safari, Opera and Chrome.

    Seems like a js operation that is stopping the click through.

    Any thoughts?

  31. Permalink to comment#

    dare i say it, Flash is so much fun!
    nice one! ill be using this for our next project.

  32. Eric
    Permalink to comment#

    Chris, I just wanted to let you know that I think that this is awesome, and that this website has blatantly ripped you off:
    http://www.htmldrive.net/items/show/327/Inset-Border-Effect-jQuery-Plugin.html
    I nofollowed the link so they don’t get any of your pagerank props.

  33. Simon
    Permalink to comment#

    Hi,

    I used this plugin together with jQuery Cycle. Works great in FF/Chrome, but in IE7/IE8CMode it acts weird. It doesn’t outline the image well, and at first is smaller than the image (leaving about 1px line visible of the photo), and then ‘suddenly’ gets the right size. Very strange and ugly effect. Has anyone encountered this?

  34. gafields
    Permalink to comment#

    Hi Chris, thanx for this useful plugin. I will use it on my next project

  35. Permalink to comment#

    I’ve realized a variant of this nice plugin that offers different configuration options.
    I’d like to know what do you think about it?

    here’s the link: http://loige.altervista.org/jQueryNiftyBorders/
    and the github project: http://github.com/loige/jQueryNiftyBorders

  36. Mike
    Permalink to comment#

    Having some troulbe in IE. The images I am using the effect on are also linkable to other URL’s. works fine in Firefox, but the images are no longer clickable in IE. Is there any fix for this. I put the class on img as instructed..

    Hope you can help..Thank you.
    Mike

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".