CODEWITHSUNDEEP
csshtmlposition
Leon Gaban
Leon Gaban

Reputation: 39034

Creating a hover div that matches the height and width of base div

So I have a base div and a hover div (will display:block in js on mouseover).

Anyways I'm having the hardest time making the height and width of my hover div match the height and width of my base div.

I think the problem is because of my responsive code, also in the base div the image is actually over another background image and width and height is set to 95% to create a border effect.

#user-options li img.role-photo {
    width: 95%;
    height: 95%;
    padding-top: 5px;
}

I've uploaded my work to a test link here.

As you can see, over the 2nd "card" I have the hover div showing. The opaque white box with the 'Sign in with Facebook' button is suppose to cover up the image of the singer below. I can't seem to get it working right :(

Here is my jsfiddle

http://jsfiddle.net/leongaban/PWVBp/

HTML from current page:

<ul id="user-options">
<li>
    <img class="role-photo" src="../images/registration_fan_tile.png" alt="Fan"/>

    <h3>Fan</h3>
    <p>Calling all tastemakers! Influence Hollywood, don't just consume it. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>

<li style="">
    <div class="role-card-talent" style="position: relative;">
        <img class="role-photo" src="../images/registration_talent_tile.png" alt="Talent"/>

        <!-- Hover Controls -->
        <div class="hover_controls" style="display:block;">

            <a href="#" class="fbLoginBtn"><img class="fb-signin" src="../images/registration_signin_fb.png"></a>

            <div class="learn_about_pages learnMoreLink" tag="" style="margin:10px">
                <a href="#"><img src="../images/registration_info_icon.png">Learn More</a>
            </div>
        </div><!-- hover_controls -->
    </div><!-- role-card-talent -->

    <h3>Talent</h3>
    <p>Oh, Hai! Now you are on your way to being "connected." You're welcome. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</li>

CSS

#user-options {
    margin:0px; padding:0px; float:left; width:100%; list-style-type:none;
}
#user-options li {
    position: relative;
    float:left;
    width:20%;
margin: 1%;
    text-align: center;
    padding: 5px;
    background: url("../../images/one_background.png") no-repeat;
    background-size: 100% auto;
    overflow: hidden;
}
#user-options li img.role-photo {
    width: 95%;
    height: 95%;
    padding-top: 5px;
}
.hover_controls {
    position: absolute;
    margin: 0;
    top: 5px;
    left: -5px;
    padding: 5px;
    /*padding-top: 20px;*/
    width: 100%;
    height: auto;
    /*min-height: */
    text-align: center;
    color: #409ad5;
    font-size: 0.875em;
    font-weight: bold;
    background: rgba(255,255,255,.5);
    background-size: 100%;
}

.hover_controls a {
    color: #666;
    font-size: 0.750em;
}

.hover_controls img.fb-signin {
     width: 100%;
}

Upvotes: 2

Views: 3426

Answers (2)

Viktor S.
Viktor S.

Reputation: 12815

Simply add bottom: 5px; to your .hover_controls class, so it looks like:

.hover_controls {
    position: absolute;
    margin: 0;
    top: 5px;
    bottom: 5px;
    left: -5px;
    padding: 5px;
    /*padding-top: 20px;*/
    width: 100%;
    height: auto;
    /*min-height: */
    text-align: center;
    color: #409ad5;
    font-size: 0.875em;
    font-weight: bold;
    background: rgba(255,255,255,.5);
    background-size: 100%;
}

If you set top and bottom or left and right to absolute block inside relative block, it will stretch its height/width in a way that its bottom and top lines or left and right borders will be in x pixels from corresponding sides of parent relative div

Demo: http://jsfiddle.net/PWVBp/5/

Upvotes: 2

Cam
Cam

Reputation: 1902

Set your height to 100% on the .hover_controls in your css. see jsfiddle

http://jsfiddle.net/cornelas/PWVBp/3/

.hover_controls {
position: absolute;
margin: 0;
top: 5px;
left: -5px;
padding: 5px;
/*padding-top: 20px;*/
width: 100%;
height: 100%; /** CHANGE TO 100% **/
/*min-height: */
text-align: center;
color: #409ad5;
font-size: 0.875em;
font-weight: bold;
background: rgba(255,255,255,.5);
background-size: 100%;
}

Upvotes: 2

Related Questions