Solved

Show content on hover

Posted on 2013-12-03
2
271 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
Comment Utility
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
Comment Utility
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 Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

762 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now