Old and new photo interactive overlay...

User 122279 Photo


Senior Advisor
14,524 posts
Online Now

No problem! :) Dynamic Drive used to be a good place to look for various things, but they need to modernize a bit.
Also w3schools have a lot of non-responsive old stuff now.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 219465 Photo


Registered User
324 posts

Thanks everyone for the reply's. This is something I am working on with someone and we know this will take a lot of experimenting. This biggest hurdle will be the the exact angle of a new photo compared to the old. Setting the ratio, or height and widths of a photo seems easier lol.. Anyway, lots of works to do. Thanks for the input!!!
User 244626 Photo


Registered User
811 posts

It appears to me to be a rangeslider controlling the opacity of the foreground picture.

See this fiddle.....

http://jsfiddle.net/sergdenisov/sadxegLw/4/
Bootstrap 5 CSS Grid.
User 122279 Photo


Senior Advisor
14,524 posts
Online Now

I tried it, adding an inline image into the contrastFilter div, and that went well. But I was not able to put another div exactly underneath holding the other image. I just copied the code into the html Editor to play with it, have not tried in SD3 yet. Attaching my experiemt, maybe someone else has more luck. ;)
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 379556 Photo


Registered User
1,555 posts

For a simple SD V3 opacity slider the attached may be of interest.

Frank
Attachments:
User 122279 Photo


Senior Advisor
14,524 posts
Online Now

Well done! I see where I went wrong. Or maybe not exactly wrong, because I did try to stick a bg image into that div #contrastFilter, without success. But anyway, I didn't have time to play with it in Sd3, I just collected the code and intended to try later. It seems very easy when you see it done correctly ;)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



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.