Show content on hover

If you go to the following jsfiddle link

http://bit.ly/1bdBqRt

What i am trying to accomplish is when you hover over the box the .content div area will show up.   But it isn't working
stargateatlantisAsked:
Who is Participating?
 
Steven HarrisConnect With a Mentor PresidentCommented:
Try using:

<div class='issue'><img src="http://images.kmag.co.uk/assets/images/latestfeatures/2013/11/Modu120.jpg" />
    <div class='issueTools'>
        <div class='content' style='color:red'>Content</span>        
    </div>
</div>

.issue {
    position: relative;
    display: inline-block;
}
.issue .issueTools {
    position: absolute;
    bottom: 0;
    opacity: .75;
}
.issue .issueTools .content {
    display: none;
}
.issue:hover .issueTools .content {
    display: block;
}

Open in new window

0
 
COBOLdinosaurConnect With a Mentor Commented:
Without the transitions:

<div class='issue'><img src="http://images.kmag.co.uk/assets/images/latestfeatures/2013/11/Modu120.jpg" />
        <div class='content'>Content</div>        
</div>

.issue {
     position:relative;
     width:200px;
    height:259px;
    background:url('http://images.kmag.co.uk/assets/images/latestfeatures/2013/11/Modu120.jpg') 100%;
           }
.content {
     display:none;color:red;
     position: absolute;
    bottom: 0;
    opacity: .75;
    display:none;
               }
.issue:hover {
       opacity: .75;
         }
.issue:hover .content { 
       display:block;
       z-index:5;
               }

Open in new window

Once you have the basic effect you can add the transitions.

Cd&
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.