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>
.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;
}
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>