Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

How to make Image with a clickable link have a mouse over effect??

Hey guys, new to Twine - very new to coding too - and I'm struggling a bit with something. On Sugarcube 2.18 btw.

How can I have an image (which, when clicked, sends you to a different passage) have a mouseover effect (swapping between two images as the mouse hovers on and then off again)

At the moment all I have is this:


and have an alternate imagine (main2.png) in the same folder that I want it to switch to when I mouseover. I've looked up a couple of similar requests but they're not on sugarcube 2.x so it doesn't seem to help.


  • edited May 2017
    Easiest thing would be to make the image vanish using the CSS ':hover' selector and have another one 'hiding' behind it as a background:
    <span id='change'>[img[ed/main.png][BEGIN0]]</span>

    Then, in your CSS:
    #change {
      display: inline-block;
      background: url('ed/main2.png') ; /*<- close this extra space before the semicolon, i added it in so the forum software wouldn't make a frowny face*/
      background-repeat: no-repeat;
    #change:hover img {
      opacity: 0;

    Example HTML is attached; the image is a white heart, while the background is a red heart. When you hover, the white heart disappears, making it look like it's changing colors or filling in.
Sign In or Register to comment.