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.
How it works!
A huge thanks to Chris for editing and optimizing the plug-in and especially for posting this article!
very nice woork thanks i wil add my page
Nice plugin, thx Chris!
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?
This is a pretty neat effect, although I’d probably make the “borders” transparent as to still see most of the image.
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.
i like the effect and always support JQuery..thanks…
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 */}
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).
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.
nice trick using Overflow hidden for masking :-)
wow neat and nice like final outcome [demo page] i will use this in future project thanks for sharing it :)
nice effect
Just changed the demo to add a new effect : different inset size on left, right, top, bottom.
The “big border” example let you show “just a detail”, but the detail is on the center. With this little modification, you can choose just the detail you want.
Demo : http://dl.dropbox.com/u/394017/csstricks/InsetBorderEffect/index.html (Just added the “Not centered” part on the original demo.
Zip : http://dl.dropbox.com/u/394017/csstricks/InsetBorderEffect.zip
And I don’t care about sublicensing, so the orriginal license apply (all credits to original author http://rob-thrift.com for what he did, I don’t care about anyone giving me credits for my part)
Clever! I’ll check it out closer and get it incorporated when I get a chance.
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
I like this effect, I decided to put my site in the picture into this effect!
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.
I like the effect so much
Thanks:)
Looks like I’ve found an easier way using CSS3: You could give the image an outline (a new kind of border) and use the new property outline-offset with a negative value to place the outline inside the image. Throw CSS animations in and voilà you have it!
You can see a demo here.
I’ve only checked it on Chrome and Firefox, but this seems to do EXACTLY the same thing sans JS. Simple, pretty solution Tim.
Nice =)
I actually thought about that, but due to browser compatibility and because I’m a huge fan of jQuery, I decided not to :)
Another reason why I love following this blog. Thanks for sharing Tim. Awesome!
priceless !
thanks a lot chris :)
I learned a lot from your site.
Thank’s Chris Coyier.
Nice effect; good job Robin & Chris!
I now I understand.
Thank css-tricks.com
That is a unique effect for image display. Thanks.
where is my comment chris ?
This is an awesome plugin. I can’t wait to take a glimpse at the code!
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 =)
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.
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.
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!
Sounds like a CSS gallery waiting to happen
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!
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!
nice one! ill be using this for our next project. Thanks!
keep it up!
Very cool effect
Superb
very interesting,very fancy~
CSS3 could achieve this effect in the future.
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?
dare i say it, Flash is so much fun!
nice one! ill be using this for our next project.
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.
Using you exact images and everything.
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?
Hi Chris, thanx for this useful plugin. I will use it on my next project
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
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