So you have a nice in your new website but you want text to appear when the user hovers the cursor over it. There is a simple solution to this:
The HTML markup at this point should be:
And the CSS styling(or something similar depending on your layout style):
You’ll find at this point that you have a circular div with a picture in it. When you hover over the middle section of the picture your text will appear. However, the text only appears when you hover over a certain section of the picture. We want the text to appear when you hover over ANY section of the
What this does is creates a space above and below the text. Usually you see this CSS property being used to make text easier to read by having extra space between each line. However, here we are setting the line height to an exaggerated size in order for our
element to take up the full size of our .block
So now our text will appear when we hover over the image with a cursor, but in front of a picture text can be hard to read. If a picture is darker (like the example above) then we must compensate with a lighter colour. But what if we want to use a brighter picture where our colour scheme will no longer work as well? We can simply add some extra CSS styling.
By changing the background of our
selector to a transparent black colour with the rgba property we can fix the problem of difficult-to-read text over a bright picture.
And there you have it! You have a nice
that when hovered over will produce some nice text and a darker background behind it for readability.
There are a few drawbacks to this method. Adding extra text into your
the font-size and line heights will not be responsive to different sized browsers or mobile screens. I’ll update this tutorial next week when we learn responsive design at HackerYou!
Check out this codepen to see it in action!
Thanks for reading ☺