Board Thread:Support Requests - Getting Technical/@comment-25013146-20140606102908/@comment-856287-20140607212623

There is "hover" in the CSS: .imgUnder :hover .imgOver {}. That basically means, "When I hover over an element with the class 'imgUnder,' look for an element inside it with the class 'imgOver' and apply these styles." In this case, it's adding "visibility:visible;"

Where you put the word "hover" in the code of the wiki page was to use the template named Template:Hover. That's what the double-braces mean:  means to transclude the content found at Template:Hover. You could, of course, just write out the long form of the code every time you wanted to use a hover image; you don't need the template. All that template really does is make it easy to insert all the code you need. Basically, it's just one div inside another, each with an image inside: …and that creates HTML like this: image 'under.jpg' image 'over.jpg' …and then the CSS steps in and says "Make that element with image 'over.jpg' move and stretch to completely cover the element it's contained in: the element with image 'under.jpg.' Since it's covering the other image now, also make it completely invisible so you only see the image underneath. Now, if anyone should put their cursor over the bottom image, make the top image visible instead."

In a normal HTML website, you wouldn't have to bother with all this mess: You would just define the two images in a website's CSS and it would be fine. But, on a wiki, only admins have access to the CSS. You want other visitors to be able to edit as much as possible, so you don't want to limit this to only admins if possible.

This solution with the template defining the images and the CSS just telling it how to respond allows anyone to set up and/or edit the images in the hover effect. It's a kind of goofy, roundabout way to do it compared to just using CSS, but it allows for greater freedom in editing for non-admins.