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>
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.