Skip to content

Instantly share code, notes, and snippets.

@Kcko
Created May 19, 2021 11:33
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Kcko/95edcf3eeb25a0addf3feeb3cb52117a to your computer and use it in GitHub Desktop.
.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;
}
<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment