mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 02:10:08 +00:00
58 lines
940 B
CSS
58 lines
940 B
CSS
|
|
||
|
|
.overlay {
|
||
|
|
position: absolute;
|
||
|
|
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
background: rgba(0, 0, 0, 0.5);
|
||
|
|
|
||
|
|
-webkit-transform-style: preserve-3d;
|
||
|
|
-moz-transform-style: preserve-3d;
|
||
|
|
transform-style: preserve-3d;
|
||
|
|
}
|
||
|
|
.overlay~.overlay {
|
||
|
|
background: rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.overlay .content {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
|
||
|
|
background: white;
|
||
|
|
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
|
||
|
|
width: auto;
|
||
|
|
height: auto;
|
||
|
|
|
||
|
|
min-width: 200px;
|
||
|
|
max-width: 80vw;
|
||
|
|
max-height: 100vh;
|
||
|
|
|
||
|
|
transform: translateY(-50%) translateX(-50%);
|
||
|
|
|
||
|
|
box-shadow: rgba(0, 0, 0, 0.1) 0.3em 0.3em 5em;
|
||
|
|
}
|
||
|
|
.overlay~.overlay .content {
|
||
|
|
box-shadow: rgba(0, 0, 0, 0.05) 0.1em 0.1em 3em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* NOTE: this does not include text...
|
||
|
|
...need a way to go around this...
|
||
|
|
*/
|
||
|
|
.blur>* {
|
||
|
|
-webkit-filter: blur(2px);
|
||
|
|
filter: blur(2px);
|
||
|
|
}
|
||
|
|
.blur>.overlay {
|
||
|
|
-webkit-filter: none;
|
||
|
|
filter: none;
|
||
|
|
}
|