So I have a background image(background:url(my_image.jpg) no-repeat;), and I need a reflection for that picture, you can see here, what I mean: http://www.imgmodels.com/.
Is there a way to do that, using a JS script or css hacks...?
Best Regards,
views:
98answers:
4
+2
A:
Here is a jquery plugin that does it: http://www.digitalia.be/software/reflectionjs-for-jquery
IgalSt
2010-08-22 13:34:38
It doesn't work with `background-image`, I don't know why I don't see the reflection yet. ` $("#hold-picture.contact").reflect({height:0.3,opacity:0.4});`
Uffo
2010-08-22 13:51:45
I don't think I should be working with a background. What the script probably does is create a div under the reflected image.. and you cannot do it for a background.Anyway, there is a work around if you want it to be a background: Just use z-index to position it under the element you want to have it as a background
IgalSt
2010-08-22 14:02:53
A:
I don't know any css method (only if you crop the image and create a new div below the image, and add a background with css) but you can use jquery reflection.
Sotiris
2010-08-22 13:35:02
A:
You can achieve that using HTML5 canvas and for IE DirectX filters will help you to achieve the same effect. There is also a pre-made library that solves that for you: http://cow.neondragon.net/stuff/reflection/
dark_charlie
2010-08-22 13:36:42