Add opacity to Ferris when hovering the code block

[RafaelKr]

Fixes #2893

This PR fixes an issue which can be experienced especially on mobile devices. In some cases Ferris overlays the code as it can be seen here:

This PR adds an opacity to Ferris as soon as the wrapper element (<pre>) is hovered. On mobile the hover state is also given when the user taps an element. So if the user taps on the code, the container receives hover focus and Ferris becomes a little transparent. Then the user can see the code below.

When hovering Ferris itself (or clicking it on mobile) the transparency is removed and it becomes "solid" again.

~~If this PR will be accepted it would make sense to add a little notice explaining this behavior to the introduction chapter where Ferris is introduced.~~ Edit: I added the note.