Question

I am trying to use the JQuery reflection function and I am running into some trouble. The reflection feature works fine on any image I try to add the class to, however, it works only if I do not modify the size of the image.

Once I try to resize the image that I am applying a reflection to, the size I try to apply to it is neglected and some of the image is cut off… I was wondering what is the correct way to resize an image that I am applying a reflection to?

jsFiddle

http://jsfiddle.net/suxcd/

Note: If you remove “width:50%” the reflection works fine, and the entire image displays as it should.

Answer 1

It is possible, but it only works when using one percentual value for all images that you use reflect on (or you have to use ID’s).

Anyway, here is the updated fiddle.

Most important code: edited the document ready code:

$(document).ready(function() {
    var options = {
        opacity: 0.75
    };
    $('.reflect').reflect(options);
    $('.reflected').parent('.reflect').children('canvas').width('50%');
});​