How to make inactive content inside a div?

Without using an overlay, you can use pointer-events: none on the div using CSS.

div.disabled
{
  pointer-events: none;
    
  /* for "disabled" effect */
  opacity: 0.5;
  background: #CCC;
}

Reference