I had thought of doing something interesting where an image would change when the mouse cursor hovers over it. However, despite my best attempts to copy what was written on an older thread, I don't think I am able to get it to work.
Here's what I added to CSS (the px and image are only examples):
.face {
width: 400px;
height: 400px;
background: url('example.gif') no-repeat;
}
.face:hover {
width: 400px;
height: 400px;
background: url('example2.gif') no-repeat;
}
Then once I refreshed the cache, I tried testing on a sandbox and added this to the images in questions:
<div class="face">[[File:example.gif]]</div>
Despite all this, I can't seem to get it to work. I'm not sure if I'm missing something, miswrote anything or if this still works on UCP.
Another question I have is if the two images always need to be the same size for them to work.
Some help on this would be greatly appreciated.