CODEWITHSUNDEEP
htmlcss
Hasem Uddin
Hasem Uddin

Reputation: 19

CSS auto height and width suggestion

I have an image and div. I want to show the overlay div when hovering on the main image. Basically, the overlay div will be hidden and it will be shown only on hovering. The div should be same height and width like the image <div class="image">.

HTML: 

<div class="image">
    <figure><img src="one.jpg"></figure>
</div>
<div class="overlay">
    <p class="description">
        Some description goes here
    </p>
</div>

Upvotes: 0

Views: 115

Answers (1)

Domino
Domino

Reputation: 6768

If I managed to understand your question, you want to make an element appear over another one and to cover it fully. Here's how I would do it. Put the overlay inside a div with the image to force them to have the same size and make the overlay visible when the parent is hovered.

HTML

<div class="hoverable fillme" id="example">
    <figure>
        <img src="one.jpg" alt="one" />
    </figure>
    <div class="overlay">Some description goes here</div>
</div>

CSS

#example {
    width: 200px;
    height: 200px;
}

.fillme {
    position: absolute;
}
.fillme>* {
    position: absolute;
    top: 0px;
    left: 0px;
}
.fillme *{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding; 0px;
}
.overlay {
    visibility: hidden;
    background-color: #5555FF;
    z-index: 100;
}
.hoverable:hover .overlay{
    visibility: visible;
}

http://jsfiddle.net/do8byofd/1

If you want to do it with the exact HTML structure you have, you can't. There's no way to set the overlay to have the size of the element before it without some JavaScript.

Upvotes: 1

Related Questions