added: grid-hover-posts widget

Author: wealcoderahsan

assets/css/widgets/grid-hover-posts.css

@@ -0,0 +1,58 @@
+.wcf-grid-hover-posts {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+.wcf-grid-hover-posts svg {
+  width: 1em;
+  height: 1em;
+}
+.wcf-grid-hover-posts .wcf-post:hover .thumb, .wcf-grid-hover-posts .wcf-post:first-child .thumb {
+  opacity: 1;
+}
+.wcf-grid-hover-posts .wcf-post .thumb {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 0;
+  transition: all 0.5s;
+  opacity: 0;
+}
+.wcf-grid-hover-posts .wcf-post .thumb img {
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.wcf-grid-hover-posts .wcf-post .thumb::after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background-color: rgba(18, 18, 18, 0.2509803922);
+}
+.wcf-grid-hover-posts .wcf-post .content {
+  z-index: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  border-right: 1px solid rgba(255, 255, 255, 0.3019607843);
+  padding: 300px 30px 30px;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+/* Responsive */
+@media (max-width: 1200px) {
+  .wcf-grid-hover-posts .wcf-post {
+    position: relative;
+  }
+  .wcf-grid-hover-posts .wcf-post .thumb {
+    opacity: 1;
+  }
+}

assets/css/widgets/grid-hover-posts.min.css

@@ -0,0 +1,72 @@
+.wcf-grid-hover-posts {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  .wcf-post {
+    &:hover .thumb,
+    &:first-child .thumb {
+      opacity: 1;
+    }
+
+    .thumb {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 0;
+      transition: all 0.5s;
+      opacity: 0;
+
+      img {
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+      }
+
+      &::after {
+        position: absolute;
+        content: "";
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        background-color: #12121240;
+      }
+    }
+
+    .content {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      border-right: 1px solid #FFFFFF4D;
+      padding: 300px 30px 30px;
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+}
+
+
+/* Responsive */
+@media (max-width: 1200px) {
+
+  .wcf-grid-hover-posts {
+    .wcf-post {
+      position: relative;
+
+      .thumb {
+        opacity: 1;
+      }
+    }
+  }
+}

assets/src/scss/widgets/grid-hover-posts.scss

@@ -578,6 +578,13 @@ public static function get_widget_style()
 				'version' => false,
 				'media'   => 'all',
 			],
+			'grid-hover-posts' => [
+				'handler' => 'grid-hover-posts',
+				'src'     => 'widgets/grid-hover-posts.css',
+				'dep'     => [],
+				'version' => false,
+				'media'   => 'all',
+			],
 		];
 	}
 

class-plugin.php

@@ -993,7 +993,7 @@
 							'cTab' => 'all'
 						],
 						'is_active'    => false,
-						'is_pro'       => true,
+						'is_pro'       => false,
 						'is_extension' => false,
 						'is_upcoming'  => false,
 						'icon'         => "wcf-icon-Grid-Hover-Posts",