Week 5 Practical Exercise (Challenge only).

The practical exercise is quite easy so I just went straight to the challenge
The challenge:
If you have time at the end, experiment with the :hover pseudo-class to make the page interactive. Make the text of a post get bigger if you hover over it. Make the contents of the posts appear only when you hover the mouse over the title.

I decided to divide the challenge into 2 sections:
1. Making the post get bigger (easiest)
2. Make the contents of the posts appear only when you hover the mouse over the title. (the trickiest one)


And, I was a bit stuck with the second one, but finally got it after Googling.

1. For the first challenge, it is pretty straightforward. The workflow is when you hover the ".entry" class, you get bigger font-size. The CSS code:

.entry:hover 
{
 font-size:30px; /*You can change the size to whatever you want*/
}

2. For the second challenge, we have to use the indirect sibling selector to get the effect that we want. The CSS code:

p
{
 visibility: hidden; /*set default p as hidden*/
}

h2:hover ~ p
{
 visibility: visible; /*when you hover h2, you will get p visible (as well)*/
}