Hover at-overlay

[vulkanus]

Hi,

How can I make hover and target a div “at-overlay” in content of “inner-wrapper / Post-thumb”?
The problem is, when there is a hover in Cell, instead of showing inside the article image box, and in each one, is showing the final container of the cell.

I think the problem are how i´m using position absolute or relative ?! Anyone? Thank you

HTLM
div id=”cell-container”>
div id=”cell-content-center”>
div class=”cell”> … /div>
div class=”cell”> … /div>
div class=”cell”> … /div>
div class=”cell”> … /div>
div class=”cell”> … /div>
div class=”cell”> … /div>
div class=”cell”> … /div>
/div>
/div>

ONE CELL CONTAINER

div id=”cell-container”>
div id=”cell-content-center”>

div class=”cell”>
article id=”#aaa” class=”acme-col-3″>
div class=”inner-wrapper”>
div class=”post-thumb”>
a href=”#” class=”alink”>
img id=”a-image” class=”fit-img” src=”data:image…” >
/a>
div class=”at-content-wrapper”>
div class=”at-overlay”>
div class=”col-1″>
div class=”entry-title”>
header class=”entry-header”>
h2 class=”entry-title”>ABC ´
/header>
/div>
/div>
div class=”col-2″>
div class=”entry-data”>
/div>
div class=”col-2 fl-right”>
footer class=”entry-footer”>
/footer>
/div>
/div>
/div>
/div>
/article>
/div>

/div>
/div>

[Paulie_D]

A demo in Codepen.io or JSfiddle.net would be more useful than bare HTML & CSS.

[vulkanus]

Hi @Paulie_D

I know that, but I dont think it will work, because of the all CCS beyond this block of code. I will try it.

[vulkanus]

Hi @paulie_D

This is how must work:
https://codepen.io/Vulkanus/pen/xxKJrdL

but somehow in my localhost project, don´t do the overlay :(
perhaps by any issue in the rest of code.

Any Ideais to dig?
BTW its only happens when I add the div
div id=” content-page”>
div id=” content-center” class=”content-center-full”>

Thank you

[vulkanus]

@paulie_D

in a grid layout I have push the div “at-content-wrapper/at-overlay” to the top of a fist image, but cannot force to go under each image when do a :hover,
Any clue?

but without the div “content-page” works perfectly :(

tks

[Paulie_D]

To be honest I’m not clear on what it is you are trying to so.

Are you just trying to overlay the image on hover?

[vulkanus]

• @Paulie_D
  Yes, Overlay in hover; but only works if I not add the container ( div id=”cell-container” | <div id="cell-content-center").
  I need that because the masonry layout.

when has the container, the grid works when not, the overlay works.

Now I have like this when do a hover in A or B or C […] the overlay occur in this point * for each image

*
A | B | C
D | E | F
G | H | I

tks

[vulkanus]

Good morning @Paulie_D,

Did you understand the situation? Can you provide add / remove properties that are causing this issue?

Thank you

[vulkanus]

@Paulie_D

Any tip?
tks

[vulkanus]

@Paulie_D

the new example:

https://codepen.io/Vulkanus/pen/xxKJrdL

Can you help?
tks

[Author]

Posts