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

drduedate

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:

[img[ed/main.png][BEGIN0]]

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.

Chapel

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.