CODEWITHSUNDEEP
javascriptjqueryhtmlcss
blackhawk338
blackhawk338

Reputation: 386

How to overlay div over other div's contents without being in that div

I am making something and am wondering how to get a div to overlay another div and it's contents. What I am trying to do it kinda like youtube, when you are on a video and you hover over someone's avatar it will show a small box with their channel art and things. Here is a photo of what i'm currently getting screenshot. Here are my codes for the two divs:
circular div

#staff-info {
    width: 400px;
    height: 300px;
    background: #999;
    border: 1px solid #333;
    border-radius: 6px;
    margin: 0 auto;
    position: relative;
}

staff boxes

#staff {
    width: 256px;
    height: 60px;
    margin: 7px 4px 7px 4px;
    background: #fff;
    display: inline-block;
    background: #f3f6f9;
}
.staff-avatar {
    width: 40px;
    height: 40px;
    padding: 10px;
    display: inline-block;
    float: left;
}
.staff-name {
    display: inline-block;
    padding-top: 8px;
}
.staff-job {
    padding-top: -100px;
    font-size: 12px;
}

Grey area (main div)

#youtuber-about {
    width: 890px;
    height: auto;
    background: #d5d3d3;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    padding: 10px 0px 10px 10px;
    display: inline-block;
}

html for the divs

<div id="staff-info">yolo</div>
        <div id="youtuber-about" style="color: #333;">Our Staff<br>
            <?php
            foreach ($staff as $staff) {
                echo '
                <div id="staff"><img src="'.$staff['avatar'].'" class="staff-avatar"><div class="staff-name">'.$staff['name'].'</div><div class="staff-job">'.$staff['job'].'</div></div>';
            }
            ?>
        </div>

Upvotes: 1

Views: 721

Answers (2)

Blake Mann
Blake Mann

Reputation: 5490

If you are using jQuery, you can just append the info div inside of each staff member div whenever the users moves their mouse over that staff member.

 $('#youtuber-about > div').mouseover(function(){
     $(this).append($('#info'));
 });

And then you can style that with CSS quite easily, just setting the info div to be position: absolute; and set to fill the containing element, set to show on hover.

See Demo

Upvotes: 2

user3053234
user3053234

Reputation: 385

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

What I would do is have a div that holds both of these two divs and play with your CSS and the nesting of the divs to overlay them properly.

Absolute and Relative positioning is pretty tricky as first but once you get a hang of it you'll be doing it left and right

So remember

Add both divs to a third empty div and then put the one you want overlaying below the other.

To move use

.something {
position: absolute
top:20%
right:15%
left:10%
bottom:20%
}

Upvotes: 0

Related Questions