Show content when hovering over div in CSS

Question

I am using Freewall JS plugin to generate a mosaic image grid. I am also applying a background overlay color with opacity: 0.7 and when you hover over it, the background overlay color becomes clear with opacity: 0.2

I also have content inside each block, I've set it to display none by default but I can't get it to appear on hover.

The grid items are being generated from the javascript so the HTML is an empty div with an id

jsFiddle https://jsfiddle.net/3o63eor8/3/

<div id="freewall" class="free-wall"></div>

The CSS

.overlay-background {
    position: relative;
}
.overlay-background:before{
    position: absolute;
    content:" ";
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: none;
    z-index:0;
}
.overlay-background:before{
    display: block;
}
.dark:before {
    background-color: rgba(0,0,0,0.7);
}
.free-wall {
    width: 100%;
    height: 100%;
}
#freewall .dark:hover::before {
    background-color: rgba(0,0,0,0.2);
}
#freewall .freewall-content span {
    display: none
}
#freewall .freewall-content:hover span {
    display: block
}

The JS that generates the image blocks automatically, I've added my css classes to the temp string

var temp = "<div class='brick overlay-background dark' style='width:{width}px; " +
    "height: {height}px; " +
    "background-image: url(assets/images/posts/post-{index}.jpg); " +
    "background-repeat: no-repeat; " +
    "background-size: cover; " +
    "background-position: center center;" +
    "background-color: {color}'>" +
    "<div class='v-center text-center freewall-content'><span><i class='fa fa-search'></i></span></div>" +
    "</div>";

var colour = [
    "rgb(142, 68, 173)",
    "rgb(243, 156, 18)",
    "rgb(211, 84, 0)",
    "rgb(0, 106, 63)",
    "rgb(41, 128, 185)",
    "rgb(192, 57, 43)",
    "rgb(135, 0, 0)",
    "rgb(39, 174, 96)"
];

var w = 1, h = 1, html = '', color = '', limitItem = 17;
for (var i = 0; i < limitItem; ++i) {
    h = 1 + 3 * Math.random() << 0;
    w = 1 + 3 * Math.random() << 0;
    color = colour[colour.length * Math.random() << 0];
    html += temp.replace(/\{height\}/g, h*150).replace(/\{width\}/g, w*150).replace("{color}", color).replace("{index}", i + 1);
}
$("#freewall").html(html);

Can You Provide JSFiddle – Shankar Shastri Sep 14 '16 at 16:15 — Shankar Shastri, Sep 14 '16 at 16:15
There you go https://jsfiddle.net/3o63eor8/3/ – Halnex Sep 14 '16 at 16:20 — Halnex, Sep 14 '16 at 16:20

score 3 · Accepted Answer · answered Sep 14 '16 at 16:22

The issue is how your HTML is structured. Technically, the div where class="brick overlay-background dark" is on top of the freewall-content so you never actually hover over it. You can see this through the developer tools (f12) and looking at the live DOM tree

Change the css selector to look like -

.brick.overlay-background.dark:hover .freewall-content .span {
    display: block
}

https://jsfiddle.net/3o63eor8/8/

score 1 · Answer 2 · answered Sep 14 '16 at 16:26

Don't use display: none;

Make the opacity of the parent element 1 and then lower the opacity to so the content can be visible.

I think you're overcomplicating something that has a simple solution.

https://jsfiddle.net/erwdepqp/

.brick {
      width: 300px;
      height: 300px
    }
    .overlay-background {
        position: relative;
    }
    .overlay-background:before{
        position: absolute;
        content:" ";
        top:0;
        left:0;
        width:100%;
        height:100%;
        display: none;
        z-index:0;
    }
    .overlay-background:before{
        display: block;
    }
    .dark:before {
        background-color: rgba(0,0,0, 1);
    }
    .dark:hover::before {
        background-color: rgba(0,0,0,0.2);
    }
    .freewall-content:hover span {
        display: block;
    }

Show content when hovering over div in CSS

2 Answers2