Browse Source

bring back rotation animation (#4223)

Maggie 4 years ago
parent
commit
b05fa24dbc
2 changed files with 16 additions and 2 deletions
  1. 9 1
      quadrat/assets/theme.css
  2. 7 1
      quadrat/sass/block-styles/_query.scss

+ 9 - 1
quadrat/assets/theme.css

@@ -149,7 +149,7 @@
 	left: 0;
 	z-index: -1;
 	opacity: 0;
-	transition: opacity 0.4s ease-in-out;
+	transition: all 0.4s ease-in-out;
 }
 
 .is-style-quadrat-diamond-posts .wp-block-post-template li:hover:before {
@@ -157,10 +157,18 @@
 }
 
 .is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+1):before {
+	transform: rotate(16deg) translate(-130px, -20px);
+}
+
+.is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+1):hover:before {
 	transform: rotate(-8deg) translate(-110px, 0);
 }
 
 .is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+2):before {
+	transform: rotate(24deg) translate(-130px, 20px);
+}
+
+.is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+2):hover:before {
 	transform: rotate(16deg) translate(-110px, 40px);
 }
 

+ 7 - 1
quadrat/sass/block-styles/_query.scss

@@ -55,15 +55,21 @@
 				left: 0;
 				z-index: -1;
 				opacity:0;
-				transition: opacity 0.4s ease-in-out; 
+				transition: all 0.4s ease-in-out; 
 			}
 			&:hover:before {
 				opacity:1;
 			}
 			&:nth-child(2n+1):before {
+				transform: rotate(16deg) translate(-130px, -20px);
+			}
+			&:nth-child(2n+1):hover:before {
 				transform: rotate(-8deg) translate(-110px, 0);
 			}
 			&:nth-child(2n+2):before {
+				transform: rotate(24deg) translate(-130px, 20px);
+			}
+			&:nth-child(2n+2):hover:before {
 				transform: rotate(16deg) translate(-110px, 40px);
 			}
 		}