DirectionHover | Pol-ui - A beautiful and functional UI library for React and Next.js

The DirectionHover component is a way to display images with a hover effect that shows the direction of the entering mouse.

Importation

Import the component from pol-ui to use the conveyor element:

import { DirectionHover } from "pol-ui";

Default DirectionHover

Default

import { DirectionHover } from "pol-ui";
 
import React from "react";
 
const DirectionHoverComponent = () => {
  return (
    <DirectionHover imageUrl="https://source.unsplash.com/random">
      <div className="flex flex-col items-center justify-center ">
        <h2 className="text-white">Hover me</h2>
      </div>
    </DirectionHover>
  );
};
export default DirectionHoverComponent;

Props

Prop name	Type	Description
imageUrl	string	The url of the image to display
children	React.ReactNode \| string	The content to display on hover
childrenClassName	string	The class name to apply to the children element
imageClassName	string	The class name to apply to the image element
rounded	RoundedSizes	The rounded size to apply to the image
alt	string	The alt text to apply to the image
className	string	The class name to apply to the root element
theme	DirectionHoverTheme	The theme to apply to the root element
speed	number	The speed of the hover effect

Examples

Line example

import { DirectionHover } from "pol-ui";
 
import React from "react";
 
const DirectionHoverComponent = () => {
  return (
    <div className="flex gap-2">
      <DirectionHover imageUrl="https://source.unsplash.com/random">
        <div className="flex flex-col items-center justify-center ">
          <h2 className="text-white">Hover me</h2>
        </div>
      </DirectionHover>
      <DirectionHover imageUrl="https://source.unsplash.com/random">
        <div className="flex flex-col items-center justify-center ">
          <h2 className="text-white">Hover me</h2>
        </div>
      </DirectionHover>
      <DirectionHover imageUrl="https://source.unsplash.com/random">
        <div className="flex flex-col items-center justify-center ">
          <h2 className="text-white">Hover me</h2>
        </div>
      </DirectionHover>
    </div>
  );
};
export default DirectionHoverComponent;

Grid example

Another interesting use case is to display a grid of images with the hover effect, the images will create a nice effect when the mouse enters the grid.

Grid example

import { DirectionHover } from "pol-ui";
 
import React from "react";
 
const DirectionHoverComponent = () => {
  return (
    <div className="grid grid-cols-3 grid-rows-3 gap-2">
      <DirectionHover imageUrl="https://source.unsplash.com/random">
        <div className="flex flex-col items-center justify-center ">
          <h2 className="text-white">Hover me</h2>
        </div>
      </DirectionHover>
      <DirectionHover imageUrl="https://source.unsplash.com/random">
        <div className="flex flex-col items-center justify-center ">
          <h2 className="text-white">Hover me</h2>
        </div>
      </DirectionHover>
      <DirectionHover imageUrl="https://source.unsplash.com/random">
        <div className="flex flex-col items-center justify-center ">
          <h2 className="text-white">Hover me</h2>
        </div>
      </DirectionHover>
      <DirectionHover imageUrl="https://source.unsplash.com/random">
        <div className="flex flex-col items-center justify-center ">
          <h2 className="text-white">Hover me</h2>
        </div>
      </DirectionHover>
      <DirectionHover imageUrl="https://source.unsplash.com/random">
        <div className="flex flex-col items-center justify-center ">
          <h2 className="text-white">Hover me</h2>
        </div>
      </DirectionHover>
      <DirectionHover imageUrl="https://source.unsplash.com/random">
        <div className="flex flex-col items-center justify-center ">
          <h2 className="text-white">Hover me</h2>
        </div>
      </DirectionHover>
      <DirectionHover imageUrl="https://source.unsplash.com/random">
        <div className="flex flex-col items-center justify-center ">
          <h2 className="text-white">Hover me</h2>
        </div>
      </DirectionHover>
      <DirectionHover imageUrl="https://source.unsplash.com/random">
        <div className="flex flex-col items-center justify-center ">
          <h2 className="text-white">Hover me</h2>
        </div>
      </DirectionHover>
      <DirectionHover imageUrl="https://source.unsplash.com/random">
        <div className="flex flex-col items-center justify-center ">
          <h2 className="text-white">Hover me</h2>
        </div>
      </DirectionHover>
    </div>
  );
};
export default DirectionHoverComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface DirectionHoverTheme {
  base: string;
  overlay: string;
  background: {
    wrapper: string;
    image: string;
  };
 
  children: string;
 
  rounded: RoundedSizesElastic;
}