How to hide (and reveal!) content in Source
| 15 Nov 2020
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.
Our Light & Shade project uses this technique in a couple of sections. Check out the 'What we do' image grid and also the 'Meet the Team' section. In these examples we have hidden some content on page load and then have it set to appear when the user hovers over the various sections. It is a really nice way of keeping some information off of the page and introducing an element of interactivity with your website visitors.
Although it might sound a bit daunting to use 'Utility classes / CSS' it is really very simple. This effect only uses 2 classes:
s-hide (to set content to be hidden) and
s-reveal (to have the hidden content appear). Watch the video below to see how these are applied to some Source stacks to make this work.
Why do I need to use classes for this?
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.
What about on touch devices?
Obviously hover effects don't work the same / as well on touch devices (phones / iPads etc). If you want to make sure that hidden content is seen by all your website visitors then instead of using the
s-hide class you could instead use
s-hide-nt. What this does is still hide the content on non-touch devices (i.e. the
nt bit in the class name) but leaves it unhidden on touch devices. If you go back to our Meet the Team example in the Light & Shade project we have used this approach for the little social bar that appears on hover on non-touch devices but it is set to always appear on touch devices. Nice!
Taking it further
There is another class available
s-hide-on-reveal which can be useful to use in conjunction with
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.
Like this post?
Why not share with others that might like it too?!