Mahatma Aladdin Mahatma Aladdin - 1 year ago 86
CSS Question

Display Div text on mouse hover using css

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:


<div class="divmain">
<img src="" />
<div class="sub_div">Some Text</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;

Answer Source

The Below Code should help you:

width: 200px;

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="" width="200px" height="auto" />
<div class="sub_div">Some Text</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download