46 lines
828 B
CSS
46 lines
828 B
CSS
|
|
||
|
.block-preview {
|
||
|
/*border: black 1px solid;*/
|
||
|
box-shadow: 0px 0px 2px 0px #000000;
|
||
|
width: min(25em, calc(100vw - 2em));
|
||
|
height: 20em;
|
||
|
background-size: cover;
|
||
|
background-repeat: no-repeat;
|
||
|
}
|
||
|
|
||
|
.block-preview:hover {
|
||
|
box-shadow: 0px 0px 4px 0px #000000;
|
||
|
}
|
||
|
|
||
|
.block-preview .label {
|
||
|
transition: max-height 0.2s ease-in;
|
||
|
max-height: 20%;
|
||
|
overflow: hidden;
|
||
|
bottom: 0;
|
||
|
background-color: #FFFFFFDD;
|
||
|
padding: 0.5em;
|
||
|
bottom: 0;
|
||
|
}
|
||
|
|
||
|
.block-preview:hover .label {
|
||
|
max-height: 100%;
|
||
|
}
|
||
|
|
||
|
.block-preview .label .show-on-hover {
|
||
|
display: none;
|
||
|
transition: opacity 0.2s;
|
||
|
opacity: 0;
|
||
|
max-height: 0;
|
||
|
background: none;
|
||
|
}
|
||
|
|
||
|
.block-preview:hover .label .show-on-hover {
|
||
|
display: block;
|
||
|
opacity: 1;
|
||
|
max-height: 100%;
|
||
|
}
|
||
|
|
||
|
.padding-container {
|
||
|
padding: 1em;
|
||
|
}
|