0

All the examples I've found to do this assume you have a jpg or some other image without transparency, like this tutorial.

Now, if I applied that to a PNG with a shadow effect, the images are doubled up and the shadow effectively gets twice as dark.

If I fade out the primary image while the secondary image is fading out, there's a blinking effect, which can be minimized with a delay() on the fading out of the primary image, but it's still noticeable.

Without primary image fading: http://jsfiddle.net/ZKnKs/

Primary image fading without delay(): http://jsfiddle.net/ZKnKs/1/

Primary image fading with delay(): http://jsfiddle.net/ZKnKs/2/

For the last one, I can reduce the effect by not having the delay() in the mouseleave section, but not enough to my liking.

My question is, how can I have this be a smooth transition with no flashing but also have no doubling up of shadows?

I could separate the shadow into another image, but that seems like a rather inelegant workaround.

Thanks!

Belladonna
  • 3,824
  • 2
  • 24
  • 33
  • Don't make things hard on you. You're already overlapping the two images so the simplest solution would be to simply remove the shadow from the "over" image. In my opinion, it's not a inelegant workaround... just optimizing and writing less code. – VVV Oct 17 '12 at 17:18
  • @ComputerArts It's something that I've had to deal with a lot in the course of my work. The workaround requires more HTML/CSS and more difficulty in exporting the images, plus larger image file sizes. Finding a solution in code alone would save a lot of trouble in the long run. – Belladonna Oct 17 '12 at 18:27
  • I understand what you mean but I don't agree 100% :-P. If you want to create the same effect, the HTML/CSS will be the same and the file size will actually be slightly smaller since you will have less pixel data. I don't think there is a coding solution. To achieve what you want, you need to crossfade the images. Great! But when both images achieve 50% opacity, that's when the "blinking" shows up. How can you avoid this? The only way I see it is by using a different "hover" image (without shadow... like this one: http://clients.computerarts.ca/other/stack/pdf-download.png – VVV Oct 17 '12 at 19:03
  • 1
    Here's a simplified fiddle of what I'm trying to say: http://jsfiddle.net/ZKnKs/6/ Same HTML, same CSS (almost, I removed the opacity), smaller image. A little more work? Yes but not necessarily depending how your source files are made. – VVV Oct 17 '12 at 19:04
  • Yeah, that's what I ended up doing, it wont work for all cases, but 99% of them. Thanks for the help. – Belladonna Oct 17 '12 at 19:56

1 Answers1

0

I'm pretty sure what I was asking is impossible.

What I wanted was to have an button from a sprite sheet such as this. to be able to smoothly fade to one state to the next regardless of these variables:

  • Alpha transparency of the sprite sheet
  • Color or colors of the background
  • Speed of transition
  • (Optional) Type of easing

The problem if it's transparent, there'll always be some overlap (which could be fine if the part overlapping is the same color or opaque) or not at all, which causes a flash.

Or I could have it go rather slowly, like 1-2 second animations, which also does not work.

But usually there is a workaround.

Belladonna
  • 3,824
  • 2
  • 24
  • 33