lixin-web
Version:
vue and bootstrap
78 lines (77 loc) • 1.37 kB
text/less
/* imghvr-reveal-*
----------------------------- */
[class^='imghvr-reveal-'],[class*=' imghvr-reveal-'] {
&:before {
.fill;
content: '';
background-color: @figcaption-bg;
}
figcaption {
opacity: 0;
}
&:hover {
&:before {
.translate(0,0);
}
figcaption {
opacity: 1;
.transition-delay(@transition-duration * 0.6);
}
}
}
/* imghvr-reveal-up
----------------------------- */
.imghvr-reveal-up {
&:before {
.translateY(100%);
}
}
/* imghvr-reveal-down
----------------------------- */
.imghvr-reveal-down {
&:before {
.translateY(-100%);
}
}
/* imghvr-reveal-left
----------------------------- */
.imghvr-reveal-left {
&:before {
.translateX(100%);
}
}
/* imghvr-reveal-right
----------------------------- */
.imghvr-reveal-right {
&:before {
.translateX(-100%);
}
}
/* imghvr-reveal-top-left
----------------------------- */
.imghvr-reveal-top-left {
&:before {
.translate(-100%,-100%);
}
}
/* imghvr-reveal-top-right
----------------------------- */
.imghvr-reveal-top-right {
&:before {
.translate(100%,-100%);
}
}
/* imghvr-reveal-bottom-left
----------------------------- */
.imghvr-reveal-bottom-left {
&:before {
.translate(-100%,100%);
}
}
/* imghvr-reveal-bottom-right
----------------------------- */
.imghvr-reveal-bottom-right {
&:before {
.translate(100%,100%);
}
}