CODEWITHSUNDEEP
jqueryhtmlcssexpandonhover
Samuele
Samuele

Reputation: 510

expand a div (on hover) on top of another div

How to expand a div (on hover) on top of another div? How I can do something like is showed in the attached picture?

<article>
    <header>
        content title
    </header>
    <div>
        main article content
    </div>
    <div class="share_buttons">
        <div class="">SHARE</div>
        <div class="share_in">
            <a>FACEBOOK</a>
            <a>GOOGLE+</a>
            <a>LINKEDIN</a>
            <a>PICASA</a>
        </div>
    </div>
</article>

Expand div

Upvotes: 0

Views: 8844

Answers (8)

Vijay jain
Vijay jain

Reputation: 14

    $('.main_content').hover(function(){         $('.share_buttons').slideDown('slow',500);      },
    function(){         $('.share_buttons').slideUp('slow',500);      }
);

Upvotes: 0

user3117575
user3117575

Reputation:

here, I made one from scratch, the whole thing, but is has a different (and better) HTML layout, and it also uses pure CSS, no JavaScript required.

EDIT 1 Updated JSFiddle Better example & Better CSS layout.

HTML

<div class='box'>
    <div class='box-cnt'>Lorem ipsum dolor sit amet, dicunt perpetua te mei. Vis id tritani utroque copiosae...</div>

    <div class='box-share'>
        <div class='share-title'>Share</div>
        <div class='share-items'>
            <div class='item'>Facebook</div>
            <div class='item'>Google</div>
            <div class='item'>MySpace</div>
        </div>
    </div> 
</div>

CSS

.box {
    width: 400px;
    height: auto;
    min-height: 300px;
    padding-bottom: 55px;
    border: 1px solid lightgray;
    position: relative;
}

.box-share {
    position: absolute;
    z-index: 2;
    bottom: 0;
    background: lightgray;
    width: 100%;
    height: 50px;
    overflow:hidden;
    transition: height 450ms;
    -moz-transition: height 450ms;
    -webkit-transition: height 450ms;
}

    .box-share:hover {
        height: 100px;
    }

.share-title {
    height: 50px;
    width: 100%;
    text-align: center;
    line-height: 3.2;
}

.share-items {
    width: 100%;
    height: 50px;
}

.box-cnt {
    width: 100%;
    height: auto;
}

.item {display: inline-block;height: 100%;margin: 5px;}

Here is an example JSfiddle

Upvotes: 8

Ishan Jain
Ishan Jain

Reputation: 8161

You can use CSS Pseudo classes selector :hover.

Try this:

article:hover .share_in
{
    display:block;
}

Working Example

Upvotes: 2

vahidseo
vahidseo

Reputation: 461

Try this. Remember, XXpx is the height of div.share_in, in pixels. It would be better if you had created a fiddle.

$( ".share_buttons" ).hover ( function() {
    $( ".share_in" ).animate( { "height" : "XXpx" } );
}, function() {
    $( ".share_in" ).animate( { "height" : "0px" } );
} );

Upvotes: 0

Amin Jafari
Amin Jafari

Reputation: 7207

if I'm getting it right you want the "share_buttons" div to slide up on hover and slide down on mouse out! if so you have to note that the position of "share_buttons" div must be absolute, relative or fixed! if it is so, this is the code to do it:

$(.share_buttons).hover(function(){
    addedHeight='the height that you want it to grow to e.g. 100px';
    $(this).animate({
        height:addedHeight,
        marginTop:'-'+addedHeight
    },500);
},function(){
    $(this).animate({
        height:'the default height',
        marginTop:0
    },500);
});

Upvotes: 0

Shaunak D
Shaunak D

Reputation: 20626

Use hover() for the hover effect, and animate() to get the sliding effect.

$('.share_buttons').hover(function(){

    $('.share_in').animate("...");
});

Upvotes: 0

jony89
jony89

Reputation: 5367

You could change the div element position once hover, which i guess its :

<div class="share_buttons">

also, for that case its probably best to set an id for the element and not a class as this is a unique for that element only .

so you could set the position attribute to absolute and change the margin / padding css attributes,

That's an option, there are more.. you should play with it, the idea is that the whole time the whole div is there and you just reveal / un-reveal it .

Upvotes: 0

Jalil
Jalil

Reputation: 26

You have to first display:none; the share links. then you can use that

$( "#div-selector" ).onhover(function() {
    $( "#share-link" ).slideUp( "slow", function() {
    // Animation complete.
    });
});

Upvotes: 0

Related Questions