Как заблокировать, размыть и вывести надпись поверх меню при наведении курсора на него?

Question

[Роман]

Как при наведении курсора на меню:
1. заблокировать нажатие любых элементов
2. сделать меню полупрозрачным или размытым
3. вывести поверх меню по диагонали надпись "Only Reg"

.sidebar {
      background-color: #ccc;
      left: 0;
      top: 50px;
      bottom: 0;
      width: 240px;
    }
    .f_l {
     float: left;
    }
    .main-content {

    }
    .only_reg {
      display:none;
    }

<div>
      <div class="sidebar f_l">
        <div class="only_reg">
          Only reg
        </div>
        <ul>
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
          <li><a href="#">Menu 4</a></li>
        </ul>
      </div>
      
      <div class="main-content">
        Content
      </div>
    </div>

Answer 1

[Александр]

1. Заблокировать - pointer-events: none;
2.

.sidebar:hover {
    opacity: 0;
    // Или
    filter: blur(10px);
}