.medium-zoom-overlay {
|
position: fixed;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
opacity: 0;
|
transition: opacity 300ms;
|
will-change: opacity;
|
}
|
|
.medium-zoom--opened .medium-zoom-overlay {
|
cursor: pointer;
|
cursor: zoom-out;
|
opacity: 1;
|
}
|
|
.medium-zoom-image {
|
cursor: pointer;
|
cursor: zoom-in;
|
/*
|
The `transition` is marked as "!important" for the animation to happen
|
even though it's overriden by another inline `transition` style attribute.
|
This is problematic with frameworks that generate inline styles on their
|
images (e.g. Gatsby).
|
See https://github.com/francoischalifour/medium-zoom/issues/110
|
*/
|
transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) !important;
|
z-index: 100;
|
}
|
|
.medium-zoom-image--hidden {
|
visibility: hidden;
|
}
|
|
.medium-zoom-image--opened {
|
position: relative;
|
cursor: pointer;
|
cursor: zoom-out;
|
will-change: transform;
|
}
|
