Hover a div on other div with some opacity using css

Question

My requirement is to get a div overlapping another div at the bottom, as you can see in the first picture, and when you hover on the image I need it to get an effect like in the second image.

enter image description here

Here is my html code, but I don't know how to handle mouse events correctly.

<div id="container">
    <div class="overlay">This is overlay div.</div>
    <div class="content">This is contents div. This is contents div.</div>
</div>


#container {
    position: relative;
}

.overlay, 
.content{
    display:block;
    position: absolute;
    top: 0;
    left: 0;
}



 .overlay, 
.content{
    display:block;
    position: absolute;
    top: 0;
    left: 0;
}

But it doesn't work as I wanted. Could anyone give me some suggestions?

possible duplicate of [jquery: how can i create a simple overlay?](http://stackoverflow.com/questions/1718951/jquery-how-can-i-create-a-simple-overlay) — PSL, Sep 29 '13 at 04:52

Jacques ジャック · Accepted Answer · 2015-01-25T13:41:38.447

4

http://jsfiddle.net/mAzsL/

Here ya go man.

<div class="container">
    <div class="lower">Blah Blah Blah</div>
    <div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat elit vel tortor porta, sit amet venenatis purus condimentum. Suspendisse potenti. Aenean ultrices velit ac mattis volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</div>
</div>

.container{
    width:250px;
    height:300px;
    background:#00f;
    position:relative;
}

.lower{
    position:absolute;
    bottom:0;
    width:100%;
    color:#fff;
    padding:10px 0;
    text-indent:5px;
    background:rgba(0,0,0,.5);
}

.show{
    display:none;
    height:100%;
    width:100%;
    color:#000;
    text-indent:5px;
    background:rgba(255,255,255,.5);
}

.container:hover > .lower{
    display:none;
}

.container:hover > .show{
    display:block;
}

Here is a fiddle of the same thing, but with the content sliding up into place. I added this because SiKni8 asked why it did not slide up.

http://jsfiddle.net/mAzsL/15/

Essentially, I moved all content into one container, added transition on hover. Pretty simple changes.

edited Jan 25 '15 at 13:41

answered Sep 29 '13 at 04:48

Jacques ジャック

3,682
2
20
43

2

Thanks @jack this exactly matches my requirement – Shabarinath Volam Sep 29 '13 at 05:21
How come it doesn't slide up? – Si8 Jan 25 '15 at 03:28
@SiKni8 Because the OP didn't ask for it to. I'll add that for you, since I assume you need it. – Jacques ジャック Jan 25 '15 at 13:33
Is there anyway to make it responsive? – Si8 Jan 30 '15 at 00:50
This one is mostly responsive, but would need some tweaking. http://jsfiddle.net/mAzsL/16/ – Jacques ジャック Jan 30 '15 at 12:48

score 1 · Answer 2 · answered Sep 29 '13 at 04:51

something like

<div class="container">
    <img src="http://placehold.it/150X200/fff000" />
    <div class="inner">
        somecontent goes here
        <div class="overlay">sho on hover</div>
    </div>
</div>

and

.container {
    position: relative;
    display: inline-block;
}
.container .inner {
    position: absolute;
    bottom: 0;
    opacity: .85;
}
.container .inner .overlay {
    display: none;
}
.container:hover .inner .overlay {
    display: block;
}

Demo: Fiddle

Hover a div on other div with some opacity using css

2 Answers2