CODEWITHSUNDEEP
javascriptjqueryhtmlcssfreewalljs
Halnex
Halnex

Reputation: 4526

Show content when hovering over div in CSS

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);

Upvotes: 0

Views: 832

Answers (2)

Tom
Tom

Reputation: 2645

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;
    }

Upvotes: 1

Adjit
Adjit

Reputation: 10305

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/

Upvotes: 3

Related Questions