Panel flex

HTML

<div class="mainCat">
  <div class="elements">
    <a href="demo">
      <div class="element">
        <p>
          Text 1
        </p>
      </div>
    </a>
    <a href="demo">
      <div id="p28" class="element">
        <p>
          hover me
        </p>
      </div>
    </a>
    <a href="demo">
      <div class="element">
        <p>
          Text 1
        </p>
      </div>
    </a>
    <a href="demo">
      <div class="element">
        <p>
          Text 1
        </p>
      </div>
    </a>
    <a href="demo">
      <div class="element">
        <p>
          Text 1
        </p>
      </div>
    </a>
    <a href="demo">
      <div class="element">

        <p>
          Text 1
        </p>
      </div>
    </a>
    <a href="demo">
      <div class="element">

        <p>
          Text 1
        </p>
      </div>
    </a>
    <a href="demo">
      <div class="element">

        <p>
          Text 1
        </p>
      </div>
    </a>
    <a href="demo">
      <div class="element">

        <p>
          Text 1
        </p>
      </div>
    </a>
    <a href="demo">
      <div class="element">

        <p>
          Text 1
        </p>
      </div>
    </a>
    <a href="demo">
      <div class="element">

        <p>
          Text 1
        </p>
      </div>
    </a>
    <a href="demo">
      <div class="element">

        <p>
          Text 1
        </p>
      </div>
    </a>

  </div>
</div>
<div class="subMainCat">
  <div class="elements">
    <a href="demo">
      <div class="element">
        <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100">
        <p>
          Text 1
        </p>
      </div>
    </a>
    <a href="demo">
      <div class="element">
        <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100">
        <p>
          Text 1
        </p>
      </div>
    </a>
    <a href="demo">
      <div class="element">
        <img...

CSS

.elements {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  align-content: center;
}

/* default not displayed */
.subMainCat,
.lv2SubMainCat {
  display: none;
}

.element {
  background: green;
  text-align: center;
  width: 150px;
  margin-bottom: 10px;
  margin-left: 10px;
  opacity: 1;
}

.sub .current .element {
  height: 100px;
}

#p28:hover > .lv2SubMainCat {
  display: block;
}

.element img {
  width: 90px;
  height: 60px;
}

.element:hover img {
  filter: grayscale(1) invert(100%);
  background: red;
}

JavaScript

function openForm() {
  document.getElementById("myForm").style.display = "block";
}

function closeForm() {
  document.getElementById("myForm").style.display = "none";
}