I’m writing my first twine game and need some help with positioning images. I’m trying to position multiple images side by side that also fades out when hovered. I’ve successfully done this using HTML, but when the same code is placed is Twine the images stack on top of each other instead.
We would need to see the code in your Twine passage in order to tell exactly what’s going on.
I suspect the problem is that you have the HTML in the passage laid out the same as you do in the HTML you included, which means that you have a bunch of linebreaks between things in Twine. SugarCube normally turns linebreaks in the code into <br> elements, so you’d have to disable that default behavior.
I agree with HiEv about using the <> macro to remove the elements that will automatically be added to the generated HTML, however I added your CSS to the Story Stylesheet area of a new project and your HTML structure to that project’s main (Start) passage like so.
(note: example is using TWEE Notation)
It needs class="link-internal" to be recognized as a SugarCube link. Also, you should put tabindex="0" there as well, so that the page can be navigated using the keyboard, in order to help those with disabilities use the page. (Similarly, the “alt” attribute for the image should describe the image for visually impaired people.) So if you want to send people to a passage named “PassageName” then the anchor line should be:
You can see how this is coded yourself by putting a standard passage link into a passage, playing the story, and then right-clicking on the link and inspecting that element. That will show you the HTML for that element and the CSS which is applied to it in the inspector windows. I’ve found using that technique to be quite helpful for a lot of things like this.
Ah, the problem was the “width: 40%” in the “container” class. Remove that and it looks fine.
I just used the trick where I right-clicked on an apple image, inspected the element, clicked on different lines of HTML until I saw which one was causing the gap between the images. Once I found the problem element (the “container” <div>), then I looked at its CSS to see what was causing that. Disabling “width: 40%” made the image look fine, so I knew that was the source of the problem.
Try that trick yourself before removing that line from your CSS, that way you can see how to find and fix things like that yourself in the future.
If you use the data-passage content attribute on the anchor element, then SugarCube does all that for you—i.e., [[foo|bar]] and <a data-passage="bar">foo</a> generate completely equivalent anchor elements.