Display Div text on mouse hover using css

Question

I am new to css and ui designing.
Here's the case.
I have a div(divmain). Inside that divmain, I have an image and another div (sub_div). There are texts inside sub_div which I want to display on mouse hover, hidden otherwise using just css (no javascript/jquery).
Kindly suggest the approach I should follow.

Right now I am doing something like:

Html:

<div class="divmain">

<img src="" />

<div class="sub_div">Some Text</div>

</div>

Css:

.divmain .sub_div {

    height: 70px;

    opacity: 0;

    position: absolute;

    bottom: 0px;

    left: 0px;

    right: 0px;

    padding: 2px 0px;

    color: #ffffff;

    text-decoration: none;

    vertical-align: middle;

    text-align: center;

    -webkit-transition: opacity 500ms;

    -moz-transition: opacity 500ms;

    -o-transition: opacity 500ms;

    transition: opacity 500ms;

    margin-top: 35px;

    line-height: 70px;



}



.divmain:hover .sub_div {

    opacity: 0.8;

}

Answer 1

The Below Code should help you:

.divmain{
width: 200px;
}

.sub_div{
display:none; /* This code hides the text initially */
/* Your sub_div styles can go here*/
 }

.divmain:hover .sub_div{
  display:block; /*Here we are making the .sub_div visible on hover*/
}

<div class="divmain">
<img src="http://wallpapercave.com/wp/EC4hMSt.png" width="200px" height="auto" />
<div class="sub_div">Some Text</div>
</div>

Display Div text on mouse hover using css

Sign up