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)
… then viewed the resulting story HTML file within Chrome and saw the following.
As stated by HiEv, we would need to see the code within your Twine project to be able to debug why you are seeing the result you are.
note: If you are new to using CSS flex then I suggest reading this css-tricks article, as it may help with you using features like justify-content, flex-grow and flex-wrap.
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.
Thanks for for the reply. The images are clickable and functions as intended, but shrinks automatically when I wrap the anchor around it, regardless if class="link-internal" is added or not.
My guess is that the anchor is an inline element and it’s not supposed to wrap around block elements in the first place? Is there another way to do 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.
