Image Overlay

EImageOverlay is a kind of image superimposed over another image or video. It is applied to an underlying image or video to add more text or graphic components.Demo Here

Import

import EImageOverlay from "@components/Elements/EImageOverlay";

Usage

<EImageoverlay src="image_src" alt="alt">
  Ipsum Dolor Sit Amet
</EImageoverlay>

Props

For EImageOverlay component, the following props are available:

Prop	Type	Default	Note
src	String	-	image overlay src attribute.
alt	String	-	The alt attribute specifies an alternate text for an area, if the image cannot be displayed.
className	String	-	Overrides or extends the component's styles.
width	[String, Number]	-	Sets the component's width. Default unit is px.
height	[String, Number]	-	Sets the component's height. Default unit is px.
active	Boolean	false	By using this prop the overlay appears on image.
shouldDetectHover	Boolean	true	By using this prop the overlay appears on image only during hover.
animation	String	-	The EImageOverlay element can be animated in four ways: rotate-left, rotate-right, zoom-out and zoom-in.

Children

The EImageOverlay component provides a children props that enable you to customize the content.

Children	Description
✔️	Component's content.