How to block, blur and display the inscription on top of the menu when you hover over it?

Question

css

As when hovering over the menu:
1. block the click of any elements
2. make the menu translucent or blurry
3. display the inscription "Only Reg" diagonally over the menu

.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. Block - 2.pointer-events: none;

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