Image

Image layer has many options you can play with,

  • Hover Effects
  • size
  • Transition Duration

Tip: You can add URL and Lightbox to your image!

Hover Effects

EffectsDescription
Gray-scale
  • Applies Gray-scale when hovering over an image.
  • Click Here to view Gray-scale effect demo.
color
  • Applies Color effects to the Gray-scale image when hovering.
  • Click Here to view color effects demo.
Dive
  • Gives an effect of diving into an image when hovering.
  • Click Here to view Dive effect demo
Swap
  • Gives an effect where you can swap between the Image and Overlay
  • Detailed explanation of "how to use swap?" is attached Here
Scroll
  • Scroll effect is perfect for long image i.e., pages like websites, landing page etc.
  • Detailed explanation of "How and Where to use the scroll effect?" is attached Here
Zoom
  • Zoom in - Gives an effect of zooming in on hovering
  • Zoom out - Gives an effect of zooming out on hovering
  • Zoom in out - The zoom in out effect zooms in the image for some seconds based on the Transition speed and comes back to the original state
  • Zoom out in - The zoom out is almost same as zoom in out however here the image zoom out and comes back to the original state
  • Zoom in blur - The zoom in blur effect zooms in the image and blurs it for some seconds based on the Transition speed and comes back to the original state
  • Zoom out blur - The zoom out blur is same as zoom in blur however here the image zooms out and blured for some seconds and comes back to the original state
  • Zoom Out Up - While hovering it gives an effect of zooming out and the image moves up
  • Zoom Out Down - While hovering it gives an effect of zooming out and the image moves down
  • Zoom Out Left - While hovering it gives an effect of zooming out and the image moves left
  • Zoom Out Right - While hovering it gives an effect of zooming out and image moves right
  • Zoom Out Flip Horizontal - While hovering it gives an effect of zooming out and flips the image horizontally
  • Zoom Out Flip Vertical - While hovering it gives an effect of zooming out and flips the image vertically
  • Click Here to view zoom effects demo
Rotate
  • Rotate - This effect tilts the image to one side on hovering
  • Rotate Around - This effect minimizes the image and rotates it through the corners and fades away
  • Click Here to view rotate effects demo
Blur
  • Blurs the image on hovering
  • Click Here to view blur effects demo
Scale
  • Scale rotate left - Rotates the image to the left and also scales the image on hovering
  • Scale rotate right - Rotates the image to the right and also scales the image on hovering
  • Click Here to view scale effects demo
Move
  • Move Up - Moves the image in the upward direction for a bit on hovering
  • Move Down - Moves the image in the downward direction for a bit on hovering
  • Move Left - Moves the image towards left for a bit on hovering
  • Move Right - Moves the image towards right for a bit on hovering
  • Click Here to view move effects demo
Slide
  • Slide Up - Slides the entire image in the upward direction on hovering
  • Slide Down - Slides the entire image in the downward direction on hovering
  • Slide Left - Slides the entire image towards left on hovering
  • Slide Right - Slides the entire image towards right on hovering
  • Click Here to view slide effects demo
Hinge
  • Hinge Up - Image opens with the top edges hinged upon hovering
  • Hinge Down - Image opens with the bottom edges hinged upon hovering
  • Hinge Left - Image opens with the left edges hinged upon hovering
  • Hinge Right - Image opens with the right edges hinged upon hovering
  • Click Here to view hinge effects demo
Flip
  • Flip Horizontal - Flips the image horizontally upon hovering
  • Flip Vertical - Flips the image vertically upon hovering
  • Flip Diagonal Left - Flips the image diagonally from the left upon hovering
  • Flip Diagonal Right - Flips the image diagonally from the right upon hovering
  • Click Here to view Flip effects demo
Fold
  • Fold Up - Gives an effect of folding up on hovering the Image
  • Fold Down -Gives an effect of folding down up on hovering the Image
  • Fold Left - Gives an effect of folding left up on hovering the Image
  • Fold Right - Gives an effect of folding right up on hovering the Image
  • Click Here to view Fold effects demo
Pivot
  • Pivot Top Left - Gives an effect of image hanging from left top edge up on hover
  • Pivot Top Right - Gives an effect of image handing from right top edge up on hover
  • Pivot bottom Left -Gives an effect of image hanging from left top edge up on hover
  • Pivot Bottom Right - Gives an effect of the image hanging from the bottom edge up on hover
  • Click Here to view pivot effects demo
Light Speed
  • Light Speed Out Left - When hovering this effect changes the image in to parallelogram and move to left
  • Light Speed Out Right - When hovering this effect changes the image in to parallelogram and move to the right
  • Click Here to view light speed effects demo
Fall Away
  • Fall Away Horizontal - When hovering this effect shows as if the image is falling away spinning Horizontally and fades away
  • Fall Away Vertical - When hovering this effect shows as it the image is falling away spinning vertically and fades away
  • Fall Away Rotate - When hovering this effect makes the image to rotate in clockwise direction and fades away
  • Fall Away Rotate Invert - When hovering this effect makes the image to rotate in anticlockwise direction and fades away
  • Click Here to view fall Away speed effects demo
Throw
  • Throw Up - Hovering through this image shows like the image is thrown upwards with rotate effect
  • Throw Down - When hovering this effect shows like the image is thrown downwards with rotate effect
  • Throw Left - When hovering this effect shows like the image is thrown towards the left with rotate effect
  • Throw Right - When hovering this effect shows like the image is thrown towards the right with rotate effect
  • Click Here to view throw effects demo
Cube
  • Cube Up - This effect moves the image upwards like cube on hovering
  • Cube Down - This effect moves the image downwards like cube on hovering
  • Cube Left - This effect moves the image towards left like cube on hovering
  • Cube Right - This effect moves the image towards right like cube on hovering
  • Click Here to view cube effects demo
Stack
  • Stack - This effect applies stack effect when hovering over the image
  • Click Here to view stack effects demo
Bounce
  • Bounce Out - When hovering through this image the image Bounces outwards and goes back to normal
  • Bounce Out Up - When hovering through this image the image Bounces upwards and goes back to normal
  • Bounce Out Down - When hovering through this image the image Bounces downwards and goes back to normal
  • Bounce Out Left - When hovering through this image the image Bounces towards Left and goes back to normal
  • Bounce Out Right - When hovering through this image the image Bounces towards right and goes back to normal
  • Click Here to view Bounce effects demo