About Plug-in

The jQuery plugin for Hover Over content
  • Can be used to show content on hover over image/text
  • To show CTA buttons on hover over overlay
  • Can be used to show zoom-in/info icon on image
  • To show title text in over lay and slide up on hover over


Plug-in Options

Options  -  How to setup  -  Default Options


How and where you can use hoverOver plug-in?

Content Title VisibleContent title visible at bottom/top. This can be used with flytop/flybototm only both In/Out shuld be same

Content Box Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Read more

Plug-in Code
    aniTypeIn: 'flybottom',
    aniTypeOut: 'flybottom',
    aniDurationIn: 500,
    aniDurationOut: 500,
    contentShowHeight: 60

Play Around!!!

Choose your hoverOver content In and Out animation from total 14 different effects as listed below none, fade
flytop, flybottom, flyleft, flyright, flylefttop, flyleftbottom, flyrighttop, flyrightbottom,
curtaintop, curtaincenterwidth, curtaincenterheight
fromcetner, tocetner


Very important notes to take a look when defining plug-in
  • Hover over content can be defined on text content or image
  • You can define content text either in contentData or define data-content='#contentID' and define content inside <div id="contentID">Hover Content Goes Here</div>
  • 14 different animation styles
  • 5 styles for show content e.g. fly, curtain, push, pull, tocenter/fromcenter
  • Content can be half visible using contentShowHeight. (e.g. Can be used with "flytop" & "flybottom")

Please take an important note of below points
  • ContentShowHeight can be used with aniInType "flytop" and aniOutType "flybottom". Both aniInType & aniOutType should be same.
    (e.g. aniInType: flytop and aniOutType: flytop or aniInType: flybottom and aniOutType: flybottom)
  • Curtain animation is not possible with aniInType: curtainbottom, aniInType: curtainbottomleft and aniOutType: curtainbottomleft" & aniOutType: curtainbottom, aniOutType: curtainbottomright and aniOutType: curtainbottomright this animation type best work with aniInType: curtaintop
  • contentPushPullType can be used with having same aniType for In & Out.
    Animation should be "flytop", "flybottom", "flyleft", "flyright" also pushContentData will be shown in this scanario when content is pulled/pushed

Other Plug-in(s)

Other Plug-in(s) by me on Code Canyon

addDot - The jQuery Plug-in for Adding Hot SpotsLight weight, unique, very useful...

About Plug-in "addDot" plug-in is useful for adding a hot spot to show short description about specific portion of an image. User can also add thumb image in the description. Plug-in can be used in various industries like.

  • Real Estate - Building Image (Can show which floor has what facility)
  • Automotive - Tow/Four Wheeler (Short info about part of vehicle)
  • Medical Domain – Human Body (Describing various products that company have for specific part of human body)
  • Education – Human Anatomy
  • Factory Machinery – CNC Machines (Explaining which part does what when final product is out)

Show Image in Placeholder/Target Box - jQueryVery easy to integrate, show image in target box

About Plug-in Show in Place Holder plug-in is developed to show an image to place holder / target box. Plug-in can be used to showcase image portfolios, product images, software screenshots or any dam thing that you want to display to place holder / target box by clicking / hovering image thumbs or anchor links.

Plug-in provides facility to apply more than 20 animation effects to show image to place holder / target box. You can also add description text of an image.