It can be a nice effect to hide content on the page and then have it appear when the user hovers over it. Thanks to some of the 'effects' utility classes that are built right into Source it is very easy to achieve.
Here we use the classes s-hide
(to set content to be hidden) and s-reveal
(to have the hidden content appear).
Tip: There is another class available s-hide-on-reveal
which can be useful to use in conjunction with s-hide
and s-reveal
. s-hide-on-reveal
shows content initially but is hidden when the s-reveal
container is hovered over. This is a great way of switching out content on hover.
Using classes like this is a very powerful (and easy) way to achieve effects such as these and it also means that we don't need to clog up our stacks settings in Source for something that you may / may not use.