Hide and reveal

Avatar

By Stuart Marshall

updated almost 2 years ago

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.

Did this answer your question?