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

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

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

}
.sidebar .only_reg {
  display: none;
}
.sidebar:hover ul li{
  opacity: 0.2;
}
.sidebar:hover ul li a{
  pointer-events: none;
}

.sidebar:hover .only_reg{
  display: block;
  position: absolute;
  transform: rotate(-45deg);
  text-align: center;
  font-size: 18px;
  padding-left: 15px;
}

<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 2

.wrapper {
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  position: relative;
  bottom: 0;
  left: 0;
  width: 240px;
  background-color: #ccc;
  user-select: none;
}

.f_l { float: left; }

.sidebar:hover ul {
  filter: blur(3px);
  pointer-events: none;
}

.only_reg {
  position: absolute;
  pointer-events: none;
  transform: rotate(130deg) scale(100) translate(0%, 0%);
  color: #f000;
  transition: .6s ease-in;
  transform-origin: center;
}
.sidebar:hover>.only_reg {
  transform: rotate(-30deg) scale(2.5) translate(70%, -25%);
  color: #f00f;
}

<div class="wrapper">

  <div class="sidebar f_l">
    <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 class="only_reg">
      Only reg
    </div>
  </div>

  <div class="main-content">
    Content
  </div>
</div>

БЛОГ НА HUSL

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

Ответы (2 шт):