Currently in the process of creating a page for case studies, where a main banner image is followed by 3 rows of 3 sub-images. Each image is added through the background-image property to maintain consistent div heights. The divs have a hover container on top that should always remain above the content, but I am facing challenges when it comes to ensuring this on smaller screens (850px and below) without relying on specific pixel values. Is there a more efficient way to achieve this?
Below 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="right-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>
My assumption is that the issue lies in the absolute positioning of the covers over the case-studies. Is there an alternative approach or solution that could help me overcome this? Everything looks fine on screens larger than 851px, I just need to address the mobile display aspect.
Check out this Fiddle to see the current problem, it might be helpful to view it in fullscreen.
Thank you for your assistance!
Attempts I have made:
• Attempted to set a specific width for the container holding the cover and used overflow:hidden to hide the excess hover, but this did not yield the desired outcome.
• Tried using precise pixel values, but this approach also proved to be unsuccessful.