Merge pull request #3 from nulla-dev/image-hover-component

Added new UI Component - Image Hover component with hover effects

Author: num-js

configs/componentsDocumentation.json

@@ -124,6 +124,20 @@
       "type": "card-hover",
       "new": true
     },
+    {
+      "name": "Image Hover",
+      "componentArray": [
+        {
+          "componentName": "image-hover",
+          "filesrc": "components/image-hover/image-hover.tsx",
+          "iframeSrc": "live-components/image-hover",
+          "parentlink": "image-hover",
+          "parentName": "Image Hover"
+        }
+      ],
+      "type": "image-hover",
+      "new": true
+    },
     {
       "name": "Footers",
       "componentArray": [

configs/leftSideComponentMetaData.ts

@@ -18,6 +18,12 @@ export const basicComponents = [
     component: 'card',
     new: true,
   },
+  {
+    href: '/components/image-hover',
+    name: 'Image Hover',
+    component: 'image-hover',
+    new: true,
+  },
   {
     href: '/components/footers',
     name: 'Footers'

content/components/image-hover.mdx

@@ -0,0 +1,8 @@
+export const metadata = {
+  title: 'Image Hover',
+  description: 'A image component with a hover effect, where the image scales up and casts a shadow when hovered over. The image also has a hover effect for the text, where the text scales up and turns bold when hovered over.',
+};
+
+## Component
+
+<ComponentCodePreview name='image-hover' hasReTrigger isFitheight />

registry/components/image-hover/image-hover.tsx

@@ -0,0 +1,50 @@
+'use client';
+import React from 'react';
+
+export default function ImageHover() {
+
+  type ImageDataType = {
+    imgURL: string;
+    redirectURL?: string;
+  }
+
+  const imageData: ImageDataType[] = [
+    {
+      imgURL: "https://images.unsplash.com/photo-1571741164507-777ed01b36a2?q=80&w=2670",
+      redirectURL: "/",
+    },
+    {
+      imgURL: "https://images.unsplash.com/photo-1746289434176-40f821d31216?q=80&w=2670",
+      redirectURL: "/",
+    },
+    {
+      imgURL: "https://images.unsplash.com/photo-1710402536084-b583dc4df3ca?q=80&w=2670",
+      redirectURL: "/",
+    },
+    {
+      imgURL: "https://images.unsplash.com/photo-1694315643343-b32de9a66d63?q=80&w=2670",
+      redirectURL: "/",
+    }
+  ];
+
+
+  return (
+    <>
+      <section className="">
+        <div className="2xl:max-w-screen-3xl mx-auto flex mt-12 max-w-screen-xl flex-col justify-center space-y-24 px-8 py-12 md:px-12 lg:py-24">
+          <div className="mx-auto flex flex-col sm:flex-row">
+            {imageData.map((item, index) => (
+              <a key={index} href={item.redirectURL} target="_blank" rel="noreferrer">
+                <img
+                  src={item.imgURL}
+                  className={`h-full w-full origin-bottom transform rounded-xl object-cover duration-500 hover:-translate-y-12 hover:scale-150 hover:rotate-0 ${index % 2 === 0 ? 'rotate-6' : '-rotate-12'}`}
+                  alt="struct-ui-image-hover"
+                />
+              </a>
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}