I was not able to find a way to make it work so far. The best success so far just made the images vanish and not come back after the first mouseover.
Printable View
I was not able to find a way to make it work so far. The best success so far just made the images vanish and not come back after the first mouseover.
Yeah, it wouldn't work well with variable sized images. The whole BBCode system is really restrictive so it's kinda hard to make it work for all cases. I experimented with it a bit more though, and managed to get something which seems to work by using event listeners combined with animations: https://jsfiddle.net/cpmam9jt/4/.
Basically involves changing the opacity on mouse enter/leave and attaching transition listeners to flip the other image's opacity. At first I tried this:
but then it kept switching the images while I hovered over the span. Didn't know wtf was happening then I ended up switching it to mouseleave instead. I guess it's cause the images were registering mouseout events whenever I switch them out? fuck meCode:<span
class="hbc-mo"
onmouseover="this.firstElementChild.style.opacity = 0;"
onmouseout="this.lastElementChild.style.opacity = 0;"
>
<img
class="hbc-mo__init"
src="http://lorempixel.com/400/200/city/1/"
style="display: initial;"
>
<img
class="hbc-mo__alt"
src="http://lorempixel.com/600/300/city/2/"
style="display: none; opacity: 0;"
>
</span>