vertical - Trouble with responsive and absolute positioning



z-index (1)

Try adding position: relative; to the parent of cover DOM. Also ensure the cover starts from top: 0, left: 0 and ends as bottom:0 and right:0.

You might have to do a clearfix for proper alignments for ensuring overlapping of successive DOMS don't happen. (for <850px resolution alone). Adding this for generic HTML might end up screwing your desktop resolution.

I'm currently building a page for case studies that includes a main banner image followed by 3 rows of 3 sub images. Each image is added through the background-image property so the divs can stay the same height. The divs have a hover container over top that I would like to always be on top, but when I get to my break point (850px and below) it is hard, without precise pixels, to keep the cover on top of the container. Is there an easier way to do this, than what I am doing?

Here is the basic HTML structure I am using

<div class="study-list">
<a href="#">
    <div class="study-block left">
        <div class="left-case-cover">
            <div class="case-study-title">A Bridge For Kids Raises Scholarship Funds For Students Using Dxxx's Fundraising Software</div>
            <div class="case-study-cta">Click here to read more</div>
        </div>
        <div class="study study1"></div>
    </div>
</a> 
<a href="#">
    <div class="study-block center">
        <div class="center-case-cover">
            <div class="case-study-title">A Bridge For Kids Raises Scholarship Funds For Students Using Dxxx's Fundraising Software</div>
            <div class="case-study-cta">Click here to read more</div>
        </div>
        <div class="study study2"></div>
    </div>
</a> 
<a href="#">
    <div class="study-block right">
        <div class="rightt-case-cover">
            <div class="case-study-title">A Bridge For Kids Raises Scholarship Funds For Students Using Dxxx's Fundraising Software</div>
            <div class="case-study-cta">Click here to read more</div>
        </div>
        <div class="study study3"></div>
    </div>
</a> 

I'm almost positive this isn't working due to the fact that the covers have to be absolutely positioned over the case-studys. Is there a better way to go about this, or can any of you help me make this work? It looks good for screen sizes 851px and higher, just need to figure out a way to get this working in mobile.

Here is a Fiddle of my current problem, it may help to expand it into fullscreen.

Thank you for the help!


Things I have tried:

• I have tried to make the container that holds the cover a certain width then overflow:hidden to hide the excess hover, but this hasn't worked.

• I've tried to do this with precise pixels but this has also failed me.