I'm using Twine 2.0.11 and SugarCube 1.0.34.
I'm trying to layer images so they rest on top of each other to create a composite. What I would like is for the images to reside in the passage element, so when the story bar is open, the images slide to the right along with the rest of the text and when the story bar is closed, the images slide to the left with the text. Out of the box, only the text (or a single image) does that.
If I use position:absolute in the CSS, then the images layer properly in the top left corner of the window, right where I specify. However, they don't react with the rest of the passage text. They remain static regardless of whether the story bar is open or not. Position:fixed does the same thing.
If I create a new div with a relative position in the passage via HTML, then place the images with an absolute or fixed position inside the div, they're still pegged to the left. I tried both of these along with supporting CSS but neither worked:
<div class="relative"><div class="absolute">[img[picture1.png]]</div><div class="absolute">[img[picture2.png]]</div></div>
<div class="relative"><img class="absolute" src="picture1.png"/><img class="absolute" src="picture2.png"/></div>
I tried to create a new div via a JS append, but for some reason I could only get it to display text. Images didn't show up at all.
Does anyone have any suggestions on how to do this? I can't be the only one to run into this issue. And since Twine uses both HTML and CSS, there's got to be a way to do it.
Thanks,
I'm trying to layer images so they rest on top of each other to create a composite. What I would like is for the images to reside in the passage element, so when the story bar is open, the images slide to the right along with the rest of the text and when the story bar is closed, the images slide to the left with the text. Out of the box, only the text (or a single image) does that.
If I use position:absolute in the CSS, then the images layer properly in the top left corner of the window, right where I specify. However, they don't react with the rest of the passage text. They remain static regardless of whether the story bar is open or not. Position:fixed does the same thing.
If I create a new div with a relative position in the passage via HTML, then place the images with an absolute or fixed position inside the div, they're still pegged to the left. I tried both of these along with supporting CSS but neither worked:
<div class="relative"><div class="absolute">[img[picture1.png]]</div><div class="absolute">[img[picture2.png]]</div></div>
<div class="relative"><img class="absolute" src="picture1.png"/><img class="absolute" src="picture2.png"/></div>
I tried to create a new div via a JS append, but for some reason I could only get it to display text. Images didn't show up at all.
Does anyone have any suggestions on how to do this? I can't be the only one to run into this issue. And since Twine uses both HTML and CSS, there's got to be a way to do it.
Thanks,