使用CSS在鼠标悬停时显示Div文本

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> 

Answer 2

This should help you

<div class="divmain">
<img src="mrm.gif" alt="Smiley face" />
<div class="sub_div">Some Text</div>
</div>

.divmain .sub_div {
      display: none;
}

.divmain:hover .sub_div {
    display: block;
}

Click to view CodePen