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

Question

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

Please share your CSS, or even better, create a JSFiddle that reproduces the problem. On what element do you trigger the hover, and how are they all placed? — GreyRoofPigeon, Jun 02 '14 at 06:41
As is always the case with this kind of thing, get the positioning figured out first, and then worry about hovering. Are you asking how to position the divs one over the other? Or how to adjust the positing/visibility on hover? — gwcoffey, Jun 02 '14 at 06:41

score 8 · Accepted Answer · 2014-06-02T07:25:04.443

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

Ishan Jain · Answer 2 · 2014-06-02T07:12:03.173

2

You can use CSS Pseudo classes selector :hover.

Try this:

article:hover .share_in
{
    display:block;
}

Working Example

edited Jun 02 '14 at 07:12

answered Jun 02 '14 at 06:58

Ishan Jain

8,063
9
48
75

score 0 · Answer 3 · answered Jun 02 '14 at 06:46

0

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.
    });
});

answered Jun 02 '14 at 06:46

Jalil

26
1
8

score 0 · Answer 4 · answered Jun 02 '14 at 06:48

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 .

score 0 · Answer 5 · answered Jun 02 '14 at 06:52

0

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

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

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

answered Jun 02 '14 at 06:52

Shaunak D

20,588
10
46
79

score 0 · Answer 6 · answered Jun 02 '14 at 07:00

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);
});

score 0 · Answer 7 · answered Jun 02 '14 at 07:01

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" } );
} );

score 0 · Answer 8 · answered Jun 02 '14 at 09:36

0

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

answered Jun 02 '14 at 09:36

Vijay jain

16
2

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

8 Answers8