CODEWITHSUNDEEP
javascriptjqueryhtmlcssuser-interface
Shabarinath Volam
Shabarinath Volam

Reputation: 747

Hover a div on other div with some opacity using css

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?

Upvotes: 0

Views: 2245

Answers (2)

Jacques
Jacques

Reputation: 3774

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.

Upvotes: 4

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 1

Related Questions