Fotos overlappen

Status
Niet open voor verdere reacties.
Die programma's zijn er. Zoek eens op panorama foto maken.
Wellicht dat je dan al iets vindt.
Anders ga ik wel eens zoeken.

Succes er mee.
 
Het gaat juist om de overlapping van de foto's. Twee foto's op elkaar en dat je dan met een sleep balk de verschillen duidelijk kan zien!
 
Dit is ook niet wat ik bedoel!

De link die ik bij mijn eerste post mee stuurde. Ik wil zo'n zelfde iets maken. Een webpagina waarbij je twee fotos over elkaar hebt staan welk je middels een slider kan laten veranderen.
 
dus 2 foto's op dezelfde plek waarvan je de een of de andere meer of minder kunt tonen.

Hier de code waarmee dit gedaan wordt, een kwestie van programmeren in html, dus geen programma.
<body>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="twentytwenty-container" style="height: 720px;">
<img class="twentytwenty-before" src="img1.jpg" style="clip: rect(0px, 576px, 720px, 0px);"></img>
<img class="twentytwenty-after" src="img2.jpg"></img>
<div class="twentytwenty-overlay"></div>
<div class="twentytwenty-handle" style="left: 576px;"></div>
</div>
</div>
Klik om te vergroten...
 
Hooi, haha zou je even goed naar de link willen kijken die ik stuurde? Ik wil exact het zelfde maken! Wat ik met deze code bereik is dat de fotos naast elkaar staan in plaats van over elkaar heen.
 
twee beelden.jpg

Hier zie je de code en in de rode cirkeltjes de getallen die veranderen als je de scheidingslijn verplaatst.
Dus ik heb goed naar de link gekeken en deze code is dus de basis.
De plaats van de muis bepaalt de coördinaten in de cirkeltjes.
Overigens recht in het schermpje bij clip zie je dat getal ook veranderen.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan