Skip to main content

Image Hover Wrapper

The <image-hover-wrapper> component is an interactive custom element that changes the cursor to an image when hovering over the wrapped content. This is useful for creating engaging visual effects in your web applications.

Installation​

To use the <image-hover-wrapper> component, first ensure you have installed the essential-components package in your project.

npm install essential-components

Import​

Import the component in your JavaScript or TypeScript file:

import 'essential-components/src/image-hover-wrapper';

Usage​

After importing, you can use the <image-hover-wrapper> component in your HTML or JSX. Wrap it around any content to apply the image hover effect. The component takes two main attributes: src and tag.

  1. Basic usage with text:

    <image-hover-wrapper src="./img/sky.jpg" tag="span">
      Beautiful Sky
    </image-hover-wrapper>

  1. Using with a button:

    <image-hover-wrapper src="./img/click.png" tag="button">
      Click for more!
    </image-hover-wrapper>

  1. Wrapping a heading:

    <image-hover-wrapper src="./img/landscape.jpg" tag="h2">
      Discover Amazing Landscapes
    </image-hover-wrapper>

Attributes​

AttributeTypeDescriptionRequired
srcStringThe path to the image file to use as the cursor.Yes
tagStringThe HTML tag to use for wrapping the content.Yes

Behavior​

When a user hovers over the content wrapped by <image-hover-wrapper>, the cursor changes to the specified image. This effect applies within the boundaries of the wrapped element.

Styling​

The <image-hover-wrapper> component does not apply any default styles to the wrapped content. You can style the content as you normally would, using CSS classes or inline styles.

Browser Support​

This component should work in all modern browsers that support Custom Elements, Shadow DOM, and the Canvas API.

Accessibility​

When using this component, consider the following accessibility considerations:

  • The hover image is purely decorative and does not convey essential information.
  • Screen readers will ignore the hover image and only read the content wrapped by the component.
  • Ensure that any interactive elements wrapped by this component are accessible via keyboard navigation.

Performance​

The <image-hover-wrapper> is designed to be efficient, but be mindful of the image sizes used to ensure optimal performance. Large images may impact load times and hover interaction smoothness.

Image Format Support​

This component supports various image formats including JPEG, PNG, GIF, and AVIF. Ensure your target browsers support the image format you choose, especially for newer formats like AVIF.