adding hover behavior for images

website/blog/2023-04-18-building-a-kimball-dimensional-model-with-dbt.md

@@ -185,7 +185,7 @@ Now that you’ve set up the dbt project, database, and have taken a peek at the
 
 Identifying the business process is done in collaboration with the business user. The business user has context around the business objectives and business processes, and can provide you with that information. 
 
-<Lightbox src="/img/blog/2023-04-18-building-a-kimball-dimensional-model-with-dbt/conversation.png" width="65%" title="Conversation between business user and analytics engineer"/>
+<Lightbox src="/img/blog/2023-04-18-building-a-kimball-dimensional-model-with-dbt/conversation.png" title="Conversation between business user and analytics engineer"/>
 
 Upon speaking with the CEO of AdventureWorks, you learn the following information: 
 

website/docs/docs/cloud/manage-access/cloud-seats-and-users.md

@@ -136,8 +136,7 @@ to allocate for the user. If your account does not have an available license to
 allocate, you will need to add more licenses to your plan to complete the license
 change.
 
-<Lightbox src="/img/docs/dbt-cloud/access-control/license-manual.png"
-          title="Manually assigning licenses"/>
+<Lightbox src="/img/docs/dbt-cloud/access-control/license-manual.png" title="Manually assigning licenses"/>
 
 ### Mapped configuration
 

website/docs/docs/deploy/dashboard-status-tiles.md

@@ -56,7 +56,7 @@ Note that Mode has also built its own [integration](https://mode.com/get-dbt/) w
 Looker does not allow you to directly embed HTML and instead requires creating a [custom visualization](https://docs.looker.com/admin-options/platform/visualizations). One way to do this for admins is to:
 - Add a [new visualization](https://fishtown.looker.com/admin/visualizations) on the visualization page for Looker admins. You can use [this URL](https://metadata.cloud.getdbt.com/static/looker-viz.js) to configure a Looker visualization powered by the iFrame.  It will look like this:
 
-<Lightbox src="/img/docs/dbt-cloud/using-dbt-cloud/dashboard-status-tiles/looker-visualization.jpeg" width="65%" title="Configure a Looker visualization powered by the iFrame" />
+<Lightbox src="/img/docs/dbt-cloud/using-dbt-cloud/dashboard-status-tiles/looker-visualization.jpeg" title="Configure a Looker visualization powered by the iFrame" />
 
 - Once you have set up your custom visualization, you can use it on any dashboard! You can configure it with the exposure name, jobID, and token relevant to that dashboard.
 
@@ -79,7 +79,7 @@ https://metadata.cloud.getdbt.com/exposure-tile?name=<exposure_name>&jobId=<job_
 ```
 :::
 
-<Lightbox src="/img/docs/dbt-cloud/using-dbt-cloud/dashboard-status-tiles/tableau-object.png" width="65%" title="Configure Tableau by using a Web page object." />
+<Lightbox src="/img/docs/dbt-cloud/using-dbt-cloud/dashboard-status-tiles/tableau-object.png" title="Configure Tableau by using a Web page object." />
 
 ### Sigma
 
@@ -99,4 +99,4 @@ https://metadata.au.dbt.com/exposure-tile?name=<exposure_name>&jobId=<job_id>&to
 ```
 :::
 
-<Lightbox src="/img/docs/dbt-cloud/using-dbt-cloud/dashboard-status-tiles/sigma-embed.gif" width="65%" title="Configure Sigma by using an embedded UI element." />
+<Lightbox src="/img/docs/dbt-cloud/using-dbt-cloud/dashboard-status-tiles/sigma-embed.gif" title="Configure Sigma by using an embedded UI element." />

website/docs/faqs/Git/git-migration.md

@@ -16,7 +16,7 @@ To migrate from one git provider to another, refer to the following steps to avo
 2. Go back to dbt Cloud and set up your [integration for the new git provider](/docs/cloud/git/connect-github), if needed. 
 3. Disconnect the old repository in dbt Cloud by going to **Account Settings** and then **Projects**. Click on the **Repository** link, then click **Edit** and **Disconnect**. 
 
-   <Lightbox src="/img/docs/dbt-cloud/disconnect-repo.gif" width="65%" title="Disconnect and reconnect your git repository in your dbt Cloud Account Settings pages."/>
+   <Lightbox src="/img/docs/dbt-cloud/disconnect-repo.gif" title="Disconnect and reconnect your git repository in your dbt Cloud Account Settings pages."/>
 
 4. On the same page, connect to the new git provider repository by clicking **Configure Repository**
    - If you're using the native integration, you may need to OAuth to it.

website/src/components/lightbox/index.js

@@ -1,34 +1,56 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import styles from './styles.module.css';
 import imageCacheWrapper from '../../../functions/image-cache-wrapper';
 
 function Lightbox({
-  src, 
+  src,
   collapsed = false,
-  alignment = "center", 
-  alt = undefined, 
-  title = undefined, 
+  alignment = "center",
+  alt = undefined,
+  title = undefined,
   width = undefined,
 }) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [expandImage, setExpandImage] = useState(false);
 
-  // Set alignment class if alignment prop used
-  let imageAlignment = ''
-  if(alignment === "left") {
-    imageAlignment = styles.leftAlignLightbox
-  } else if(alignment === "right") {
-    imageAlignment = styles.rightAlignLightbox
-  }
+  useEffect(() => {
+    let timeoutId;
+
+    if (isHovered) {
+      // Delay the expansion by 5 milliseconds
+      timeoutId = setTimeout(() => {
+        setExpandImage(true);
+      }, 5);
+    }
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [isHovered]);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+    setExpandImage(false);
+  };
 
   return (
     <>
       <link href="/css/featherlight-styles.css" type="text/css" rel="stylesheet" />
-      <span 
+      <div
         className={`
-          ${styles.docImage} 
+          ${styles.docImage}
           ${collapsed ? styles.collapsed : ''}
-          ${imageAlignment}
+          ${alignment === "left" ? styles.leftAlignLightbox : ''}
+          ${alignment === "right" ? styles.rightAlignLightbox : ''}
+          ${isHovered ? styles.hovered : ''}
         `}
-        style={width && {maxWidth: width}}
+        style={width && { maxWidth: width }}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
       >
         <span>
           <a href="#" data-featherlight={src}>
@@ -37,13 +59,14 @@ function Lightbox({
               alt={alt ? alt : title ? title : ''}
               title={title ? title : ''}
               src={imageCacheWrapper(src)}
+              style={expandImage ? { transform: 'scale(1.2)', transition: 'transform 0.3s ease', zIndex: '9999' } : {}}
             />
           </a>
         </span>
         {title && (
           <span className={styles.title}>{ title }</span>
         )}
-      </span>
+      </div>
     </>
   );
 }

website/src/components/lightbox/styles.module.css

@@ -10,7 +10,7 @@
   margin: 10px auto;
   padding-right: 10px;
   display: block;
-  max-width: 400px;
+  max-width: 80%;
 }
 
 :local(.collapsed) {
@@ -24,3 +24,9 @@
 .rightAlignLightbox {
   margin: 10px 0 10px auto;
 }
+
+:local(.hovered) { /* Add the . before the class name */
+  filter: drop-shadow(4px 4px 6px #aaaaaae1);
+  transition: transform 0.3s ease;
+  z-index: 9999;
+}