Solved

Show content on hover

Posted on 2013-12-03
2
277 Views
Last Modified: 2013-12-03
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
0
Comment
Question by:stargateatlantis
2 Comments
 
LVL 18

Accepted Solution

by:
Steven Harris earned 250 total points
ID: 39693287
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
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 250 total points
ID: 39693770
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
css, html 5 51
CSS Logo Problem. 2 26
Increase the size of the modal in Bootstrap 5 43
<div class="clearfix"></div> not working on home slider 5 19
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question