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

Documentation

Plug-in Options

Options  -  How to setup  -  Default Options

Options

ContentDataContent text and markup to show when user hover over it. Either pass contentData or define data-content='#contentID' and define <div id="contentID">Hover Content Goes Here</div>

PushContentDataContent text and markup to show when user hover over it and in background that text will be displayed. Either pass pushContentData or define data-push-content='#contentID' and define <div id="contentID">Hover Content Goes Here</div>

AniTypeIn - AniTypeOutAnimation type/effect for hover over content in and out effect. There are 14 animation effects for hover over content in / out.

AniDurationIn - AniDurationOutContent animation duration for in and out.

AniInDelay - AniOutDelayContent animation duration for hoverOver content in and out delay.

ContentShowHeightTo show hover over content box on load, when user hover over content it animates from there.

ContentPushPullTypeWith this effect, content will be push / pull based on value user define.

OnMouseOver / OnMouseOut Call Back FunctionsCall back functions through which you can fire set of code on mouseOver / mouseOut hover over box.

How to Setup?

  • Add jQuery library to HTML page
  • Add hoverOver plug-in file
  • Add hoverOver CSS file
  • Define plug-in options for hover over effect. e.g. content text, animation type for in and out effect, animation duration etc.
  • Bind hoverOver plug-in through ID/Class
Add Plug-in CSS & JS 
<link href="css/hover-content-style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.0.min.js" type="text/javascript" language="javascript"></script>
<script src="js/jquery.hoverOver.js" type="text/javascript" language="javascript"></script>
Plug-in Options 
$('.hoverOver').hoverOver({
    contentData: '<p class="hover-content-block"><strong>Hover Over Title</strong>Lorem ipsum dolor sit amet, consectetur. <a href="#" class="quick-view-btn"<Show Detail</a></p>',
    pushContentData: '<p>This is push content box content</p>',
    aniTypeIn: 'flytop',
    aniTypeOut: 'flytop',
    aniDurationIn: 500,
    aniDurationOut: 500,
    aniInDelay: 0,
    aniOutDelay: 0,
    contentShowHeight: 0
    contentPushPullType: '',
    onMouseOver: function(){},
    onMouseOut: function(){}
});

Default Options

//Default settings
$.fn.hoverOver.defaults = {
    contentData: 'Hover content',
    pushContentData: 'Box content when hover over',
    aniTypeIn: 'fade',
    aniTypeOut: 'fade',
    aniDurationIn: 500,
    aniDurationOut: 500,
    aniInDelay: 0,
    aniOutDelay: 0,
    contentShowHeight: 0,
    contentPushPullType: '',
    onMouseOver: function(){},
    onMouseOut: function(){}
};

contentData, pushContentData, aniDurationIn, aniDurationOut, aniInDelay, aniOutDelay, onMouseOver, onMouseOut

Above options are explained in detail in "Options" section.

Please note for options contentShowHeight & contentPushPullType aniTypeIn & aniTypeOut combination options needs to define accordingly. Please read detailed note regarding aniTypeIn & aniTypeOut by clicking Features link.

Examples

How and where you can use hoverOver plug-in?

Content & CTA ButtonContent & CTA button in hoverOver

Flower Bookey

You can order flower bookey to your loved one in any country, where we provide our services Check out list of list of countries to send bookey.

ViewOrder
Plug-in Code
$('#demo1').hoverOver({
    aniTypeIn: 'flybottom',
    aniTypeOut: 'flybottom'
});

Only CTA Button/IconCTA button/Icon with delay in hoverOver

Plug-in Code
$('#demo2').hoverOver({
    contentData: '<p class="hover-content-block"><a href="javascript:void(0)" class="btn">Show Detail</a></p>',
    aniTypeIn: 'flyleft',
    aniTypeOut: 'flyright',
    aniInDelay: 1000,
    aniOutDelay: 1000
});

CSS3 Radius & IconCSS3 radius property and icon in content

Plug-in Code
$('#demo3').hoverOver({
    contentData: '<p class="hover-content-block"><a href="javascript:void(0)" class="btn"><img src="img/icn-search.png" /></a></p>',
    aniTypeIn: 'fade',
    aniTypeOut: 'fade',
    aniDurationIn: 400,
    aniDurationOut: 300
});

Content Show by
Push EffectContent will be push

Featured

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Plug-in Code
$('#demo4').hoverOver({
    aniTypeIn: 'flyleft',
    aniTypeOut: 'flyleft',
    aniDurationIn: 500,
    aniDurationOut: 500,
    contentPushPullType: 'push'
});

Content Show by
Pull EffectContent will be pull

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

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.
Plug-in Code
$('#demo5').hoverOver({
    aniTypeIn: 'flyleft',
    aniTypeOut: 'flyleft',
    aniDurationIn: 500,
    aniDurationOut: 500,
    contentPushPullType: 'pull'
});

Content Show from CenterHover content from center

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.

Plug-in Code
$('#demo6').hoverOver({
    aniTypeIn: 'fromcenter',
    aniTypeOut: 'tocenter',
    aniDurationIn: 500,
    aniDurationOut: 500
});

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
$('#demo7').hoverOver({
    aniTypeIn: 'flybottom',
    aniTypeOut: 'flybottom',
    aniDurationIn: 500,
    aniDurationOut: 500,
    contentShowHeight: 60
});

ButtonsCan be used in buttons

CLICK HERE
HOVER OVER ME
HOWDY
Plug-in Code
$('#demoBtn1').hoverOver({
    contentData: 'GET IT FREE!!!',
    pushContentData: '',
    aniTypeIn: 'flybottom',
    aniTypeOut: 'flybottom',
    contentPushPullType: 'push',
    aniDurationIn: 500,
    aniDurationOut: 500
});
$('#demoBtn2').hoverOver({
    contentData: 'GET IT FREE!!!',
    aniTypeIn: 'fade',
    aniTypeOut: 'fade',
    aniDurationIn: 500,
    aniDurationOut: 500
});
$('#demoBtn3').hoverOver({
    contentData: 'HOW ARE YOU?',
    pushContentData: '',
    aniTypeIn: 'flyleft',
    aniTypeOut: 'flyleft',
    contentPushPullType: 'push',
    aniDurationIn: 500,
    aniDurationOut: 500
});

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

Plug-in OptionsSelect values and click Update It!!!

 

Update It!!!

Dynamic DemoPlug-in will be updated based on custom values

Content 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 laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Plug-in CodePlug-in code based on custom values by user

$('#demoCustom').hoverOver({
    aniTypeIn: 'fade',
    aniTypeOut: 'fade',
    aniDurationIn: 500,
    aniDurationOut: 500,
    aniInDelay: 0,
    aniOutDelay: 0,
    contentShowHeight: 0,
    contentPushPullType: ''
});

Features/Limitations

Very important notes to take a look when defining plug-in
Features
  • 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.