adding hover behavior for images

[mirnawong1]

AI Summary: This pull request primarily involves changes to the image display size in various markdown files. The changes reduce the width of images displayed using the <Lightbox> tag from the original size to a smaller size, typically 90%. This adjustment is likely to improve the layout and readability of the documentation pages.

this pr adds a 'hover over images to expand' behavior. the following changes were made to the original code:

original lightbox src component:

• original lightbox component handled the display of images with alignment and collapsing features.
• used props for customization but did not have any interactive behavior like hover effects or handling of scrolling events.

updates to lightbox src component:

• added state variables : isHovered, expandImage, and isScrolling.
• isHovered: tracks if the mouse is hovering over image.
• expandImage: identifies if the image should expand.
• isScrolling: helps indicate whether page is currently being scrolled. (to avoid pop ups when a user is reading)
• implemented a hover effect that expands the image (setExpandImage(true) after a delay (300 milliseconds), but only if the page is not being scrolled (!isScrolling).
• added a handleScroll function to update the isScrolling state when the user scrolls. This function also cancels the image expansion (setExpandImage(false)) and resets isScrolling after a delay.
• added event listeners for mouse enter (onMouseEnter) and mouse leave (onMouseLeave) to control the hover state (setIsHovered).
• attached a scroll event listener to the window in a useEffect hook to trigger handleScroll
• modified the handleMouseEnter to include a delay (matching the scroll delay) before setting isHovered to true. This ensures that hover effects are not activated immediately after scrolling stops.
• adjusted the component structure and styling to accommodate the new hover and scroll behaviors. this means the image now scales (transform: 'scale(1.2)') with a smooth transition (transition: 'transform 0.5s ease') when hovered, and the zIndex is increased to '9999' during expansion.
• added a default width to 80% to all images (using lightbox src component) to ensure the scale was consistent across images and improve accessibility. adding widths also helps with page load and SEO.

images

• also adjusted widths for images that a large width attribute assigned. this is to ensure it scaled correctly without affecting the user UX.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs-getdbt-com	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 22, 2024 10:48am

[mirnawong1]

the original images don't have a width attribute and this undo's a python script i ran, which added a width attribute.

[mirnawong1]

also not sure if the scrolling is affecting the hover a little

[JKarlavige]

The scale on hover looks like it works great, awesome work @mirnawong1!

[JKarlavige]

Nice work with these conditional checks!