Halnex Halnex - 2 months ago 22
HTML Question

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

Answer

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/

Comments