How to make some text in a block transparent?

Question

css

Hello.
I am absolutely not good at HTML, but there is a task: there is a div , it has a long text, broken into several p .
It is necessary that the text becomes more transparent from about the middle of the block, and at the end it ceases to be completely visible. But when you hover over the block, the whole thing became visible again and clearly.
Tell me how this can be implemented? Where to dig? I tried gradients - but they do not affect the text itself, in my opinion.

Answer 1

Alternatively, you can do this https://jsfiddle.net/kmdq14dw/3/

Answer 2

Not a layout designer, but I believe that you need to slap a gradient on top of the text. The beginning of the gradient is completely transparent (in this place the text will be visible ), the end is the opaque color of the background of the text (in this place the text will NOT be visible ).