Как замаскировать элементы в css?

Question

Интересно, как сделать такой эффект на элементах в css.

Я хочу дать такой эффект на элемент, чтобы пользователи не могли получить к нему доступ, но немного его увидели.

Можете ли вы дать мне подсказки для этого?

Пример маскировки

Answer 1

Вы должны использовать css свойство непрозрачности.

см. Это:

.box{
    background:#ddd;
    width:200px;
    height:200px;
    padding:10px;
    opacity:0.5;
}
.box:hover{
    opacity:1;
}

<div class="box">
  hi
</div>

Answer 2

Используйте opacity свойство и :hover псевдокласс.

.box {
  opacity: .5;
  transition: opacity .5s;
}

.box:hover {
  opacity: 1;
}

<div class="box">
  <h1>heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>