Overlay

Hover Effects

Hover EffectsDescription
Fade
  • Applies Faded effects to the overlay upon hovering
  • Click Here to view some fade effects demo
Zoom In
  • Gives an effect of zooming in on hovering
  • Click Here to view some Zoom in effect demo
Crop
  • While hovering the overlay is cropped a bit in the sides
  • Click Here to view Crop effect demo
Slide
  • Slide Up - Slides the overlay in the upward direction on hovering
  • Slide Down - Slides the overlay in the downward direction on hovering
  • Slide Left - Slides the overlay towards left on hovering
  • Slide Right - Slides the overlay towards right on hovering
  • Slide Top Left - Slides the overlay from top left corner upon hovering
  • Slide Top Right - Slides the overlay from top right corner upon hovering
  • Slide Bottom Left - Slides the overlay from bottom left corner upon hovering
  • Slide Bottom Right - Slides the overlay from bottom right corner upon hovering
  • Click Here to view slide effects demo
Shutter
  • Shutter out Horizontal - On hovering the overlay appears like opening a shutter horizontally out from the center
  • Shutter out Vertical - On hovering the overlay appears like opening a shutter vertically out from the center
  • Shutter out Diagonal Left - On hovering the overlay appears like opening a shutter diagonally out towards bottom left and top right
  • Shutter out Diagonal Right - On hovering the overlay appears like opening a shutter diagonally out towards bottom right and top left
  • Shutter in Horizontal - On hovering the overlay appears like opening a shutter horizontally in towards the center
  • Shutter in Vertical - On hovering the overlay appears like opening a shutter vertically in towards the center
  • Shutter in out Horizontal - On hovering the overlay appears like opening a shutter horizontally in and out from the left and right side of the image
  • Shutter in out Vertical - On hovering the overlay appears like opening a shutter horizontally in and out from the left and right side of the image
  • Shutter in out Diagonal Left - On hovering the overlay appears like opening a shutter diagonally in and out from the bottom left and top right
  • Shutter in out Diagonal Right - On hovering the overlay appears like opening a shutter diagonally in and out from the bottom right and top left
  • Click Here to view shutter effects demo
Strip
  • Strip Shutter Up - On hovering the overlay appears like stripes horizontally out from the top center to the bottom
  • Strip Shutter Down - On hovering the overlay appears like stripes horizontally out from the bottom center to the top
  • Strip Shutter Left - On hovering the overlay appears like stripes vertically out from the right center to the left
  • Strip Shutter Right - On hovering the overlay appears like stripes vertically out from the left center to the right
  • Strip Horizontal Up - On hovering the overlay appears like stripes horizontally from the bottom to top
  • Strip Horizontal Down - On hovering the overlay appears like stripes horizontally from the top to bottom
  • Strip Horizontal Top Left - On hovering the overlay appears like stripes horizontally from the top left to the right
  • Strip Horizontal Top Right - On hovering the overlay appears like stripes horizontally from the top right to the left
  • Strip Horizontal Bottom Left - On hovering the overlay appears like stripes horizontally from the bottom left to the right
  • Strip Horizontal Bottom Right - On hovering the overlay appears like stripes horizontally from the bottom right to the left
  • Strip Vertical Left - On hovering the overlay appears like stripes vertically from right to left
  • Strip Vertical Right - On hovering the overlay appears like stripes vertically from left to right
  • Strip Vertical Top Left - On hovering the overlay appears like stripes vertically from the top left to the right
  • Strip Vertical Top Right - On hovering the overlay appears like stripes vertically from the top right to the left
  • Strip Vertical Bottom Left - On hovering the overlay appears like stripes vertically from the bottom left to the right
  • Strip Vertical Bottom Right - On hovering the overlay appears like stripes vertically from the bottom left to the right
  • Click Here to view the strip effects demo
Pixel
  • Pixel Up - On hovering the overlay appears like pixel stripes horizontally out from the bottom center to the top
  • Pixel Down - On hovering the overlay appears like pixel stripes horizontally out from the bottom center to the top
  • Pixel Left - On hovering the overlay appears like pixel stripes vertically out from the right center to the left
  • Pixel Right - On hovering the overlay appears like pixel stripes vertically out from the left center to the right
  • Pixel Top Left - On hovering the overlay appears like pixel stripes horizontally out from the top left to the right
  • Pixel Top Right - On hovering the overlay appears like pixel stripes horizontally out from the top right to the left
  • Pixel Bottom Left - On hovering the overlay appears like pixel stripes horizontally out from the bottom left to the right
  • Pixel Bottom Right - On hovering the overlay appears like pixel stripes horizontally out from the bottom right to the left
  • Click Here to view the pixel effects demo
Pivot
  • Pivot Top Left - Gives an effect of overlay hanging from left top edge up on hover
  • Pivot Top Right - Gives an effect of overlay handing from right top edge up on hover
  • Pivot bottom Left -Gives an effect of overlay hanging from left top edge up on hover
  • Pivot Bottom Right - Gives an effect of overlay hanging from the bottom edge up on hover
  • Click Here to view the pivot effects demo
Blocks
  • Blocks Rotate Left - On hovering overlay appears as four blocks and rotates in anti-clockwise direction
  • Blocks Rotate Right - On hovering overlay appears as four blocks and rotates in clockwise direction
  • Blocks Rotate In Left - On hovering overlay appears as four blocks and rotates in from left of four corners of the image
  • Blocks Rotate In Right - On hovering overlay appears as four blocks and rotates in from right of four corners of the image
  • Blocks In - On hovering overlay appears as four blocks from four corners and merge at the center
  • Blocks Out - On hovering overlay appears as four blocks from four corners and goes out to form an overlay image
  • Blocks Float Up - On hovering overlay appears as four blocks from the bottom and forms the overlay image
  • Blocks Float Down - On hovering overlay appears as four blocks from the top and forms the overlay image
  • Blocks Float Left - On hovering overlay appears as four blocks from right to left and forms the overlay image
  • Blocks Float Right - On hovering overlay appears as four blocks from left to right and forms the overlay image
  • Blocks Zoom Top Left - On hovering overlay appears as four blocks and each blocks zoom out, starting from the top left block
  • Blocks Zoom Top Right - On hovering overlay appears as four blocks and each blocks zoom out, starting from the top right block
  • Blocks Zoom Bottom Left - On hovering overlay appears as four blocks and each blocks zoom out, starting from the bottom left block
  • Blocks Zoom Bottom Right - On hovering overlay appears as four blocks and each blocks zoom out, starting from the bottom right block
  • Click Here to view the blocks effects demo
Throw
  • Throw Up - On hovering the overlay is thrown upwards with rotate effect
  • Throw Down - On hovering the overlay is thrown downwards with rotate effect
  • Throw Left - On hovering the overlay is thrown towards the left with rotate effect
  • Throw Right - On hovering the overlay is thrown towards the right with rotate effect
  • Click Here to view the throw effects demo
Flash
  • Flash Top Left - On hovering the overlay flashes from the top left diagonally towards the bottom right
  • Flash Top Right - On hovering the overlay flashes from the top right diagonally towards the bottom left
  • Flash Bottom Left - On hovering the overlay flashes from the bottom left diagonally towards the top right
  • Flash Bottom Right - On hovering the overlay flashes from the bottom right diagonally towards the top left
  • Click Here to view the flash effects demo
Splash
  • Splash Up - On hovering the overlay shows from a drop of circle which flashes from bottom of the image towards up
  • Splash Down - On hovering the overlay shows from a drop of circle which flashes from top of the image towards bottom
  • Splash Left - On hovering the overlay shows from a drop of circle which flashes from right of the image towards left
  • Splash Right - On hovering the overlay shows from a drop of circle which flashes from left of the image towards right
  • Click Here to view the splash effects demo
Stack
  • Stack Up - On hovering the overlay shows from bottom to top like stacking over an image
  • Stack Down - On hovering the overlay shows from top to bottom like stacking over an image
  • Stack Left - On hovering the overlay shows from Left to right like stacking over an image
  • Stack Right - On hovering the overlay shows from right to left like stacking over an image
  • Click Here to view the stack effects demo
Circle
  • Circle Up - On hovering the overlay shows from the bottom to top with a curved edges like circle until the overlay is fully displayed
  • Circle Down - On hovering the overlay shows from the top to bottom with a curved edges like circle until the overlay is fully displayed
  • Circle Left - On hovering the overlay shows from right to left with a curved edges like circle until the overlay is fully displayed
  • Circle Right - On hovering the overlay shows from the left to right with a curved edges like circle until the overlay is fully displayed
  • Circle Top Left - On hovering the overlay shows from the top left to right diagonally with a curved edges like circle until the overlay is fully displayed
  • Circle Top Right - On hovering the overlay shows from the top right to left diagonally with a curved edges like circle until the overlay is fully displayed
  • Circle Bottom Left - On hovering the overlay shows from the bottom left to right diagonally with a curved edges like circle until the overlay is fully displayed
  • Circle Bottom Right - On hovering the overlay shows from the bottom right to left diagonally with a curved edges like circle until the overlay is fully displayed
  • Click Here to view the circle effects demo
Book
  • Book Open Horizontal - On hovering the overlay opens up like a book horizontally from the center of the image
  • Book Open Vertical - On hovering the overlay opens up like a boo vertically from the center of the image
  • Click Here to view the book effects demo
Border

The Border effects has many hover effects which displays the overlay as borders upon hovering over the image, following are some of the effects available for the overlay

  • Border Reveal
  • Border Reveal Horizontal
  • Border Reveal Vertical
  • Border Reveal Diagonal Left
  • Border Reveal Diagonal Right
  • Border Reveal Top Left
  • Border Reveal Top Right
  • Border Reveal Bottom Left
  • Border Reveal Bottom Right
  • Border Reveal Clockwise
  • Border Reveal Anti Clockwise
  • Border Reveal Split Clockwise
  • Border Reveal Split Anti Clockwise
  • Border Reveal Attach Clockwise
  • Border Reveal Attach Anti Clockwise

Click Here to view the border effects demo

Blinds
  • Blinds Horizontal - On hovering the overlay covers the image with horizontal stacks at the same time
  • Blinds Vertical - On hovering the overlay covers the image with vertical stacks at the same time
  • Blinds Up - On hovering the overlay covers the image with horizontal stacks aligning from bottom to top
  • Blinds Down - On hovering the overlay covers the image with horizontal stacks aligning from top to bottom
  • Blinds Left - On hovering the overlay covers the image with vertical stacks aligning from right to left
  • Blinds Right - On hovering the overlay covers the image with vertical stacks aligning from left to right
  • Click Here to view the blinds effects demo