Old and new photo interactive overlay...

User 379556 Photo


Registered User
919 posts

I wonder whether I did something different from my description, but I don't immediately see what. I attach the SD V3 file I experimented with.

Frank
Attachments:
User 122279 Photo


Senior Advisor
12,545 posts
Online Now

Found it!
In your #4 I assumed you were still in the 'out-of-view' state. But you had set it back to 'regular'.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 379556 Photo


Registered User
919 posts

Thanks, Inger.

I'd be interested to know whether it works in IE 11.

Frank
User 122279 Photo


Senior Advisor
12,545 posts
Online Now

The site that Marc referred to, has two different images for old and new. I've been trying to make them either cross fade, or one of them being made transparent. No luck yet.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 379556 Photo


Registered User
919 posts

I've not tried it, but I guess the easiest way would be to set the coloured image as the background to a container, and to put the greyscale one in the container but set to an opacity of zero in normal view, and an opacity of 1 in 'out of view'. In transitions a suitable time delay and duration could be set.

Frank
User 122279 Photo


Senior Advisor
12,545 posts
Online Now

That is exactly as I was thinking of, but there is a problem with one bg image and one inline, in that they don't scale the same way. But I'll see what I can do...
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 122279 Photo


Senior Advisor
12,545 posts
Online Now

I think I've got it. How's that?
I used two containers, both with an inline image, position absolute, so that they are lying exactly on top of each other.
(I used two of those images from that site Marc linked to)
Attachments:
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 379556 Photo


Registered User
919 posts

Yes, that works fine. I must have been somewhat bleary-eyed when I looked at the first post in this thread early this morning: I didn't notice that the picture changed other than by colouring after grey-scale.

In other contexts (toggling pictures) I have used pictures changing by having one as a background image to a container which holds the other picture (which changed to a zero opacity as necessary). I did need to ensure that the original images had exactly the same ratio of width to height, and used an image program for that. The background image could then be set to 'contain' and the other image to a width of 100%.

Frank
User 122279 Photo


Senior Advisor
12,545 posts
Online Now

I have to try that. Maybe I have always been mislead by adding the bg image first, and with no contents in the container, I felt the need to set a height. I may have made it too complicated for myself... ;)

Later: I made it. I definitely made it too complicated earlier... ;)
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 283347 Photo


Registered User
337 posts

Inger,

Yes, I have found that a lot of things on dynamicdrive are not useful because they are not responsive. I did not check this one before I posted. I should have done that...oops :/

Inger wrote:
Mark, I have used the one you mention in 'the old days', before the world got responsive. I've also tried to responsify it, but that didn't go very well.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.