[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now


Show content on hover

Posted on 2013-12-03
Medium Priority
Last Modified: 2013-12-03
If you go to the following jsfiddle link


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
Question by:stargateatlantis
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 18

Accepted Solution

Steven Harris earned 1000 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>        

.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

LVL 53

Assisted Solution

COBOLdinosaur earned 1000 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>        

.issue {
    background:url('http://images.kmag.co.uk/assets/images/latestfeatures/2013/11/Modu120.jpg') 100%;
.content {
     position: absolute;
    bottom: 0;
    opacity: .75;
.issue:hover {
       opacity: .75;
.issue:hover .content { 

Open in new window

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


Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

650 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