60 lines
1.5 KiB
SCSS
60 lines
1.5 KiB
SCSS
|
@import "./variables-lazyload";
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Visual Portfolio Lazyload Images
|
||
|
|
*
|
||
|
|
* - :first-of-type is used to prevent conflicts with hover image (Pro feature)
|
||
|
|
*/
|
||
|
|
|
||
|
|
// LazyLoad image
|
||
|
|
img.vp-lazyload,
|
||
|
|
img.vp-lazyloaded,
|
||
|
|
img.vp-lazypreload,
|
||
|
|
img.vp-lazyloading {
|
||
|
|
opacity: 0;
|
||
|
|
transition: var(--vp-lazyload-transition-duration) opacity;
|
||
|
|
}
|
||
|
|
|
||
|
|
img.vp-lazyloaded {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
:is(.vp-portfolio__item-img, .vp-portfolio__thumbnail-img) {
|
||
|
|
// Extra check for lazy loading class on the inner image
|
||
|
|
// to make sure image will be lazy loaded by Visual Portfolio.
|
||
|
|
&:has(img:first-of-type:is(.vp-lazyload, .vp-lazyloading, .vp-lazyloaded))::before {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
// Fixed possible bug with inaccessible links on images in the Classic style.
|
||
|
|
pointer-events: none;
|
||
|
|
visibility: visible;
|
||
|
|
content: "";
|
||
|
|
background-image: var(--vp-lazyload-images__background);
|
||
|
|
background-size: var(--vp-lazyload-images__background-size);
|
||
|
|
opacity: 1;
|
||
|
|
transition: var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) opacity, var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) visibility;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:has(img:first-of-type.vp-lazyloading)::before {
|
||
|
|
animation: vp-lazyload-placeholder var(--vp-lazyload-images__animation-duration) ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:has(img:first-of-type.vp-lazyloaded)::before {
|
||
|
|
visibility: hidden;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes vp-lazyload-placeholder {
|
||
|
|
0% {
|
||
|
|
background-position: 200% 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
background-position: -200% 0;
|
||
|
|
}
|
||
|
|
}
|