Как сделать часть текста в блоке прозрачным?

Question

[Максим Черепанцев]

Здравствуйте.

Абсолютно не секу в HTML, но стоит задача: есть div, в нём длинный текст, разбитый на несколько p.

Нужно чтобы текст примерно с середины блока становился более прозрачным, а в конце перестал быть виден абсолютно. Но при наведении на блок вновь стал виден весь и отчётливо.

Подскажите как это можно реализовать? Куда копать? Пробовал градиенты - но они на сам текст никак, помоему не влияют.

Answer 1

[Олег]

Как вариант можно так https://jsfiddle.net/kmdq14dw/3/

Comments

[Максим Черепанцев]

Большое спасибо за примеры! Я посмотрел и уже даже выбрал какой мне больше подойдет.

Answer 2

[Вячеслав]

https://jsfiddle.net/32tdufe2/
Вот такой пример.
При желании можно потюнить градиент (я использовал градиент отсюда)

Answer 3

[Нерон Лордов]

Не верстальщик, но полагаю, что нужно шлепать градиент поверх текста. Начало градиента - полностью прозрачное (в этом месте текст будет виден), конец - непрозрачный цвет фона текста (в этом месте текст будет НЕ виден).

Comments

[Максим Черепанцев]

присобачил градиент к самому этому div'у как вы и сказали - не работает, градиент есть, но текст всё равно виден отчётливо.

[Kovalsky]

Максим Черепанцев: нужно шлепать градиент поверх текста ?

[Максим Черепанцев]

Никита Полевой: а, т.е. div в котором он находится это не поверх?

[Kovalsky]

Максим Черепанцев: если вы просто кладёте градиент в background-image контейнера, то конечно градиент у вас будет слоем ниже чем текст. Парни, которые привели примеры, кладут градиент на абсолютно позиционированные внутри контейнера элементы.