On gists

Parent - child - overlay - increase parent by child

CSS CSS trick

index.html Raw #

<!-- DEMO: http://kod.djpw.cz/ilcd -->

<div class="row">
    <div class="content">
        obsah row <br> 

    </div>
    <div class="overlay">
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>

    </div>
</div>

<div class="row">
    <div class="content">
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
    </div>
    <div class="overlay">
        <div>1</div>
    </div>
</div>

index.css Raw #

.row {
    display: grid;
    grid-template: 1fr / 1fr;
    border: 1px solid gray;
    padding: 2rem;
    background: #f3f3f3;
    margin-bottom: 2rem;
}

.row>* {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
    width: 100%;
}

.row .overlay {
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
   display: none;
}

.row:hover .overlay {
    display: block;
}

.row .content {
    z-index: 1;
}