How do I make grouped images transparent

1

Hi! I’m curious if there is a way to make grouped images transparent at the top and bottom edges of the group. Right now, I have 24 thumbnails that is grouped up and they are controlled with a timeline that slides through the images. However, I want the top and bottom (the timeline goes vertical) to be faded out to zero. I did the easy trick with an image that is fading from transparent to the background color, but because the background is switching to the enlarged thumbnail behind it, the background color will be impossible to copy into the fading image.

I tried some css without success.

Here is an illustration on what my problem is:

2

I think you’re going to need to do some tricky thing with the background of your document here. If you overlay an image with a gradient transparency that is the same content as your background, you will fool the eye into thinking that the images are becoming transparent. In Photoshop, you can create a gradient with transparency and place that image over the bottom of your images.

3

Hi Daniel and thanks for the reply. The problem is that the background is a rotatable image so the background will always be different.

4

I wonder if the css mask property might do the trick with your background image sandwiched as a copy with an alpha mask:

http://www.html5rocks.com/en/tutorials/masking/adobe/

The downside (big one) is that you’d be SOL with IE. It’s under consideration but not implemented:
http://caniuse.com/#feat=css-masks

5

Come on IE, get with the program! Maybe Project 'Spartan' will be webkit based? Let's dream!

6

Windows 10 preview looks to have a lot of these things implemented. Not sure if they switched to webkit (I doubt it) but we can dream:) The browser compatibility dance is that unnecessary thing that we’ve all gotten used to.

1 Like