Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #295853
    vulkanus
    Participant

    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>

    #295904
    Paulie_D
    Moderator

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

    #295905
    vulkanus
    Participant

    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.

    #295928
    vulkanus
    Participant

    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

    #296056
    vulkanus
    Participant

    @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

    #296057
    Paulie_D
    Moderator

    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?

    #296069
    vulkanus
    Participant
    • @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

    #296114
    vulkanus
    Participant

    Good morning @Paulie_D,

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

    Thank you

    #296315
    vulkanus
    Participant

    @Paulie_D

    Any tip?
    tks

    #296904
    vulkanus
    Participant

    @Paulie_D

    the new example:

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

    Can you help?
    tks

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.