article:
Elements Design: 100 Free Vector Filetype Icons
article:
JS Plugin: Tokeninput

JS Plugin: ContentHover

Advertisement

"ContentHover is a small jQuery plugin that helps you show some hidden content on top of an element when the mouse hovers over it. There are options to chose how your hover effect would appear, like fade in or slide in from any direction, you can change the opacity of the overlay and other."


Plugin: ContentHover



Setup and installation

HTML
<img id="d1" src="photos/1.jpg" width="300" height="240" />
<div class="contenthover">
    <h3>Lorem ipsum dolor</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat. </p>
    <p><a href="#" class="mybutton">Lorem ipsum</a></p>
</div>


CSS
.contenthover { padding:20px 20px 10px 20px; }
.contenthover, .contenthover h3, contenthover a { color:#fff; }
.contenthover h3, .contenthover p { margin:0 0 10px 0; line-height:1.4em; padding:0; }
.contenthover a.mybutton { display:block; float:left; padding:5px 10px; background:#3c9632; color:#fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.contenthover a.mybutton:hover { background:#34742d }


jQuery

Simple fade - Use the default effect (fade), add a background color and opacity.

$('#d1').contenthover({
    overlay_background:'#000',
    overlay_opacity:0.8
});


Slide effect with different speed - Using the slide effect, add setting the animation speed to 300 miliseconds.

$('#d2').contenthover({
    effect:'slide',
    slide_speed:300,
    overlay_background:'#000',
    overlay_opacity:0.8
});


Advanced slide - Using the slide effect from different direction and a smaller overlay.

$('#d3').contenthover({
    overlay_width:270,
    overlay_height:180,
    effect:'slide',
    slide_direction:'right',
    overlay_x_position:'right',
    overlay_y_position:'center',
    overlay_background:'#000',
    overlay_opacity:0.8
});

Hovering on a div instead of an image - The plugin can be used on any html element. In this example it is a <div> element with a couple paragraphs and and image in it.

<div id="d4" style="width:300px; height:240px; background:#eee; ">
    <div style="padding:20px;">
        <p><img src="photos/3.jpg" /></p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
    </div>
</div>
<div class="contenthover">
    <h3>Lorem ipsum dolor</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
    <p><a href="#" class="mybutton">Lorem ipsum</a></p>
</div>

and

$('#d4').contenthover({
    overlay_background:'#333'
});


Using a transparent png for a better opacity effect - A transparent png could be used instead of the background_opacity option to avoid having the same opacity on the child elements of the overlay. Another option, but less supported by browsers, would be rgba color.

$('#d4').contenthover({
    hover_class:'mybackground'
});

and

.mybackground { background:url(transparent_bg.png); }

the .png image 


Using callbacks

$('#d6').contenthover({
    overlay_background:'#000',
    overlay_opacity:0.8,
    effect:'slide',
    slide_speed:500,
    slide_direction:'left',
    onshow:function(){
        $('<div>Hover element shown</div>').appendTo($('#d6_log'));
    },
    onhide:function(){
        $('<div>Hover element hidden</div>').appendTo($('#d6_log'));
    }
});



Options

* data_selector: '.contenthover', // The selector for the element that will be the content of the overlay element to show on hover
* width: 0,                                // Set to 0 to let the plugin figure it out
* height: 0,                                // Set to 0 to let the plugin figure it out
* overlay_width: 0,                   // The overlay element's width. Set to 0 to use the same as 'width'
* overlay_height: 0,                   // The overlay element's height. Set to 0 to use the same as 'height'
* overlay_x_position: 'center',   // [center, left, right] The position of the overlay horizontally (if overlay_width is different from width)
* overlay_y_position: 'bottom',   // [center, top, bottom] The position of the overlay vertically (if overlay_width is different from width)
* overlay_background: '',         // The css background of the overlay element
* overlay_opacity: 1,             // [0-1] The opacity of the overlay element
* effect: 'fade',                 // [fade, slide, show] The effect to use
* fade_speed: 400,                // Effect ducation for the 'fade' effect only
* slide_speed: 400,               // Effect ducation for the 'slide' effect only
* slide_direction: 'bottom',      // [top, bottom, right, left] From which direction should the overlay apear, for the slide effect only
* zindex: 2,                      // The base z-index value
* wrapper_class: 'ch_wrapper',    // CSS class to add to the wrapper
* normal_class: 'ch_normal',      // CSS class to add to the 'normal' element
* hover_class: 'ch_hover',        // CSS class to add to the 'hover' element
* onshow: function(){},           // Callback function when the 'hover' element is shown
* onhide: function(){}            // Callback function when the 'hover' element is hidden



Compatibility

It has been tested on the latest versions of Firefox, Chrome, IE and Opera and seems to work well. It also works on IE7, 8 and 9. It does not make use of any CSS3 transitions and effects, so the result should be similar on most browsers.




source
demo
download

Advertisement
Tags: plugin, slider, hover, content hover, jquery, develop, internet, layout

Leave a Comment

No Comment

© Creative3x Ltd.