v1.0.0

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = crlf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

.gitignore

@@ -0,0 +1,4 @@
+# Folders
+/test
+/node_modules
+package-lock.json

main.css

@@ -0,0 +1,341 @@
+[class*=img-] {
+  position: relative;
+  backface-visibility: hidden;
+  overflow: hidden;
+}
+[class*=img-] img {
+  backface-visibility: hidden;
+}
+[class*=img-]::before, [class*=img-]::after,
+[class*=img-] img,
+[class*=img-] figcaption,
+[class*=img-] figcaption::before,
+[class*=img-] figcaption::after {
+  transition-duration: 0.6s;
+  transition-property: opacity, transform;
+  transition-timing-function: cubic-bezier(0.54, 0, 0.1, 1);
+}
+[class*=img-]::before, [class*=img-]::after,
+[class*=img-] figcaption,
+[class*=img-] figcaption::before,
+[class*=img-] figcaption::after {
+  top: 0;
+  left: 0;
+  position: absolute;
+}
+[class*=img-] figcaption {
+  background-color: rgba(0, 0, 0, 0.9);
+  padding: 1.5rem;
+  color: #fff;
+  font-size: 1.125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+}
+
+.img-fade:not(:hover) figcaption {
+  opacity: 0;
+}
+
+.img-slide-up:not(:hover) figcaption {
+  transform: translateY(-100%);
+}
+.img-slide-right:not(:hover) figcaption {
+  transform: translateX(100%);
+}
+.img-slide-left:not(:hover) figcaption {
+  transform: translateX(-100%);
+}
+.img-slide-down:not(:hover) figcaption {
+  transform: translateY(100%);
+}
+
+[class*=img-push]:hover img {
+  transition-duration: 0.8s;
+}
+[class*=img-push] figcaption {
+  z-index: -1;
+}
+
+.img-push-up:hover img {
+  transform: translateY(calc(-100% - 5px));
+}
+.img-push-up:not(:hover) figcaption {
+  transform: translateY(100%);
+}
+.img-push-right:hover img {
+  transform: translateX(calc(100% + 5px));
+}
+.img-push-right:not(:hover) figcaption {
+  transform: translateX(-100%);
+}
+.img-push-left:hover img {
+  transform: translateX(calc(-100% - 5px));
+}
+.img-push-left:not(:hover) figcaption {
+  transform: translateX(100%);
+}
+.img-push-down:hover img {
+  transform: translateY(calc(100% + 5px));
+}
+.img-push-down:not(:hover) figcaption {
+  transform: translateY(-100%);
+}
+
+[class*=img-flip] {
+  perspective: 70rem;
+}
+[class*=img-flip]:hover img {
+  transform: scale(1.1);
+}
+[class*=img-flip] figcaption {
+  z-index: 1;
+}
+[class*=img-flip]:not(:hover) figcaption {
+  opacity: 0;
+}
+
+.img-flip-up figcaption {
+  transform-origin: top;
+}
+.img-flip-up:not(:hover) figcaption {
+  transform: rotateX(-80deg);
+}
+.img-flip-left figcaption {
+  transform-origin: left;
+}
+.img-flip-left:not(:hover) figcaption {
+  transform: rotateY(80deg);
+}
+.img-flip-right figcaption {
+  transform-origin: right;
+}
+.img-flip-right:not(:hover) figcaption {
+  transform: rotateY(-80deg);
+}
+.img-flip-down figcaption {
+  transform-origin: bottom;
+}
+.img-flip-down:not(:hover) figcaption {
+  transform: rotateX(80deg);
+}
+.img-flip-x {
+  overflow: initial;
+}
+.img-flip-x:hover img {
+  transform: rotateX(-180deg);
+  opacity: 0;
+}
+.img-flip-x:hover figcaption {
+  transition-delay: 0.2s;
+}
+.img-flip-x:not(:hover) img {
+  transition-delay: 0.2s;
+}
+.img-flip-x:not(:hover) figcaption {
+  transform: rotateX(90deg);
+}
+.img-flip-y {
+  overflow: initial;
+}
+.img-flip-y:hover img {
+  transform: rotateY(-180deg);
+  opacity: 0;
+}
+.img-flip-y:hover figcaption {
+  transition-delay: 0.2s;
+}
+.img-flip-y:not(:hover) img {
+  transition-delay: 0.2s;
+}
+.img-flip-y:not(:hover) figcaption {
+  transform: rotateY(90deg);
+}
+.img-flip-xy {
+  overflow: initial;
+}
+.img-flip-xy:hover img {
+  transform: rotate3d(1, -1, 0, 100deg);
+  opacity: 0;
+}
+.img-flip-xy:hover figcaption {
+  transition-delay: 0.2s;
+}
+.img-flip-xy:not(:hover) img {
+  transition-delay: 0.2s;
+}
+.img-flip-xy:not(:hover) figcaption {
+  transform: rotate3d(-1, 1, 0, 100deg);
+}
+
+[class*=img-blinds] figcaption {
+  background-color: transparent;
+  z-index: 1;
+  transition-property: color;
+}
+[class*=img-blinds]:hover figcaption {
+  transition-delay: 0.2s;
+}
+[class*=img-blinds]::before, [class*=img-blinds]::after,
+[class*=img-blinds] figcaption::before,
+[class*=img-blinds] figcaption::after {
+  content: "";
+  background-color: rgba(0, 0, 0, 0.9);
+  width: var(--ib-w, 25%);
+  height: var(--ib-h, calc(100% + 5px));
+  top: var(--ib-t, 0);
+  left: var(--ib-l, 0);
+  transform: translate3d(var(--ib-tx, 0), var(--ib-ty, 0), var(--ib-tz, 0));
+  opacity: var(--ib-to, 1);
+  transition-property: opacity, transform, height, width;
+}
+[class*=img-blinds]::after {
+  transition-delay: 0.05s;
+}
+[class*=img-blinds] figcaption::before {
+  transition-delay: 0.1s;
+}
+[class*=img-blinds] figcaption::after {
+  transition-delay: 0.15s;
+}
+[class*=img-blinds] figcaption::before,
+[class*=img-blinds] figcaption::after {
+  z-index: -1;
+}
+[class*=img-blinds]:not(:hover) {
+  --ib-to: 0;
+}
+[class*=img-blinds]:not(:hover) figcaption {
+  color: transparent;
+}
+
+[class*=img-blinds-y]::after {
+  left: 25%;
+}
+[class*=img-blinds-y] figcaption::before {
+  left: 50%;
+}
+[class*=img-blinds-y] figcaption::after {
+  left: 75%;
+}
+
+[class*=img-blinds-x] {
+  --ib-w: calc(100% + 5px);
+  --ib-h: 25%;
+}
+[class*=img-blinds-x]::after {
+  top: 25%;
+}
+[class*=img-blinds-x] figcaption::before {
+  top: 50%;
+}
+[class*=img-blinds-x] figcaption::after {
+  top: 75%;
+}
+
+.img-blinds-y-up:not(:hover) {
+  --ib-ty: -100%;
+}
+.img-blinds-y-left:not(:hover) {
+  --ib-tx: -100%;
+}
+.img-blinds-y-right:not(:hover) {
+  --ib-tx: 100%;
+}
+.img-blinds-y-down:not(:hover) {
+  --ib-ty: 100%;
+}
+.img-blinds-y-center {
+  --ib-t: 50%;
+  --ib-ty: -50%;
+}
+.img-blinds-y-center:not(:hover) {
+  --ib-h: 0%;
+}
+.img-blinds-x-up:not(:hover) {
+  --ib-ty: -100%;
+}
+.img-blinds-x-left:not(:hover) {
+  --ib-tx: -100%;
+}
+.img-blinds-x-right:not(:hover) {
+  --ib-tx: 100%;
+}
+.img-blinds-x-down:not(:hover) {
+  --ib-ty: 100%;
+}
+.img-blinds-x-center {
+  --ib-l: 50%;
+  --ib-tx: -50%;
+}
+.img-blinds-x-center:not(:hover) {
+  --ib-w: 0%;
+}
+
+[class*=img-back] {
+  perspective: 70rem;
+}
+[class*=img-back] figcaption {
+  z-index: 1;
+}
+[class*=img-back]:hover img {
+  opacity: 0;
+}
+[class*=img-back]:hover figcaption {
+  transition-delay: 0.2s;
+}
+[class*=img-back]:not(:hover) figcaption {
+  opacity: 0;
+}
+
+.img-back-up img {
+  transform-origin: top;
+}
+.img-back-up figcaption {
+  transform-origin: bottom;
+}
+.img-back-up:hover img {
+  transform: scale(0.6) rotateX(75deg) translateY(50%);
+}
+.img-back-up:not(:hover) figcaption {
+  transform: scale(0.6) rotateX(-75deg) translateY(-50%);
+}
+.img-back-left img {
+  transform-origin: left;
+}
+.img-back-left figcaption {
+  transform-origin: right;
+}
+.img-back-left:hover img {
+  transform: scale(0.6) rotateY(-75deg) translateX(50%);
+}
+.img-back-left:not(:hover) figcaption {
+  transform: scale(0.6) rotateY(75deg) translateX(-50%);
+}
+.img-back-right img {
+  transform-origin: right;
+}
+.img-back-right figcaption {
+  transform-origin: left;
+}
+.img-back-right:hover img {
+  transform: scale(0.6) rotateY(75deg) translateX(-50%);
+}
+.img-back-right:not(:hover) figcaption {
+  transform: scale(0.6) rotateY(-75deg) translateX(50%);
+}
+.img-back-down img {
+  transform-origin: bottom;
+}
+.img-back-down figcaption {
+  transform-origin: top;
+}
+.img-back-down:hover img {
+  transform: scale(0.6) rotateX(-75deg) translateY(-50%);
+}
+.img-back-down:not(:hover) figcaption {
+  transform: scale(0.6) rotateX(75deg) translateY(50%);
+}