Živá ukázka

Výsledek

<a href="#" id="example" class="hidden">
      <div class="hiddencentered" id="example2">
        sgojngojndgkmogd
      </div>
    </a>
    <div id="main">
      <div class="boxesline">
        <a class="box" href="#example">
          <div class="inbox">
            <h2>Nějaká kategorieNějaká kategorie</h2>
            <p>Popis této kategorie Popis této kategorie</p>
          </div>
        </a>
        <a class="box" href="#example">
          <div class="inbox">
            <h2>Nějaká kategorie</h2>
            <p>Popis této kategorie Popis této kategorie</p>
          </div>
        </a>
      </div>
      <div class="boxesline">
        <a class="box" href="#example">
          <div class="inbox">
            <h2>Nějaká kategorie</h2>
            <p>Popis této kategorie Popis této kategorie, může být i několikařádkovýPopis této kategorie Popis této kategorie, může být i několikařádkový</p>
          </div>
        </a>
        <a class="box" href="#example">
          <div class="inbox">
            <h2>Nějaká kategorie</h2>
            <p>Popis této kategorie Popis této kategorie</p>
          </div>
        </a>
      <div class="boxesline">
      </div>
        <a class="box" href="#example">
          <div class="inbox">
            <h2>Nějaká kategorie</h2>
            <p>Popis této kategorie Popis této kategorie</p>
          </div>
        </a>
        <a class="box" href="#example">
          <div class="inbox">
            <h2>Nějaká kategorie</h2>
            <p>Popis této kategorie Popis této kategorie</p>
          </div>
        </a>
      </div>
    </div>

HTML

Autoformát
Standardní režim
Mobilní zobrazení

@keyframes fadein{
        from { opacity: 0; }
        to   { opacity: 1; }
        }
    
      body{
        font-family: Tahoma, Verdana;
        }
      #main{
        text-align: center;
        }
      a.box{
        width: 350px;
        height: 300px;
        margin: 10px;
        background-image: url("bg1.jpg");
        background-size: 100% 100%;
        display: inline-block;
        }
      a.box > .inbox{
        background-color: rgba(0, 115, 0, 1);
        width: 100%;
        height: 300px;
        opacity: 0.95;
        transition: 200ms;
        color: #fff;
        display: flex;
        justify-content: center;
        flex-direction: column; 
        }
      a.box > .inbox:hover{
        background-color: rgba(0, 115, 0, 0.7);   
        cursor: pointer;   
        }
      a.box > .inbox h2{
        margin: 0;
        padding: 0;
        font-size: 2.2em;
        }
      a.box > .inbox p{
        padding: 0;
        margin: 5px 0 0 0;
        font-size: 0.9em;
        font-style: italic;
        word-break: break-word;
        overflow: hidden;
        }
      a.box{
        text-decoration: none;
        } 
      .hidden{
        display: none;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        transition: 300ms;
        z-index: 100;
        background-color: rgba(125, 125, 125, 0.9);
        }
      .hidden:target{       
        display: block;
        animation-name: fadein;
        animation-duration: 500ms;
        }
      .hidden .hiddencentered{
        background-color: #fff;
        height: 60vh;
        margin-top: 20vh;
        }
      a.hidden:hover{
        cursor: default;
        }

CSS

Autoformát
CSS reset
Až na konci

JS

Autoformát
jQuery
Umístění JS