CSS3 Gradients image to transparent

Question

Is there any way i could do an image to transparent gradient in a Background Image in CSS3?

I have tried this: http://jsfiddle.net/meo/e95pw/3/

The goal is to do a mirroring effect in CSS3.

I can not find out the background color behind the reflection, because it could be that there is a background image or pattern.

Any input is welcome.

edit what i need is Photoshop Image Mask but in CSS.

Answer 1

You can achieve this in pure CSS3:

http://jsfiddle.net/g105b/xaX6r/

/* Example for webkit only */
img{
    margin: 0;
    padding: 0;
    -webkit-box-reflect: below 1px
    -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.4, transparent), to(white));
}

Answer 2

This is not CSS3, but might help: Reflection.js for jQuery

This script works in all browsers supporting the canvas tag: Firefox 1.5+, Opera 9+, Safari 2+, Camino and Google Chrome. It also works in Internet Explorer 6+ by using an alternative drawing technique.

Reflections can be added to any image tag over any kind of background (even image backgrounds!).

Answer 3

Here is a demo that shows it can be done, http://duopixel.com/stack/test.html, check in webkit and Firefox.

Explanation: the only way to mask an image in Firefox is through svg masks: https://developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content,

It can be done more elegantly (with an svg from an external source) but this makes it easier to understand.

The actual code is pretty simple, just...

mask: url(#id);

Or if you want to reference an external source:

mask: url(test.html#id);

Also, the code is on my server because you must serve the html as xhtml, otherwise Firefox ignores the mask. This can be done through .htaccess like this:

RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml
RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0
RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{THE_REQUEST} HTTP/1\.1
RewriteRule .* - [T=application/xhtml+xml]

jsfiddle is not serving xhtml/application