覆盖不均匀的图像/文本网格

Question

I've been trying to create the below layout to no avail. Would someone be kind enough to help me out in either creating a minimal working example or linking to somewhere that would be able to help me out with this?

What I need is a grid where the row heights are the same. With each row containing 2 images and 1 text column (the text column being placed in different locations in each row). The text column needs to be the same height as the images and I'd like the text to be vertically centered but the width of it needs to smaller (half the size). With the images, I'd like to have a white overlay on hover or touch(mobile) with a header and a couple lines for links and one link that will have a video popup (a la fancybox).

I'd like for this to be responsive and adapt to screen sizes. On mobile I'm fine with each box being 100% width but it's the tablet sizes I think I'm having issues with laying this thing out properly. The hover state would obviously need to become a touch state on these platforms.

I'd supply my code if need be but I think I'd like to just start from scratch since I feel like I've just created a huge mess.

I feel like this is something that should be so simple yet I'm having way too many problems with this and I can't seem to find any websites that showcase examples of what I'm trying to create....similar ideas have been found but not exactly what I'm looking for.

Details:

• 1140px as the max width of the container
• 444px as the max width of the images
• 222px as the max width of the text boxes
• 5px margin/padding

Any help in the right direction would be grateful.

http://jsfiddle.net/sa7v57bf/

<div class="container">
    <ul>
        <li class="text">
            <div>
                Some Text.
            </div>
        </li>
        <li class="media">
            <img src="http://placehold.it/444x342" alt="Image">
            <div class="info">
                <h2>HEADER</h2>
                <div class="program-info">
                    <p><a href="#">Program Page</a></p>
                    <p><a href="#">Video</a></p>
                </div>
            </div>
        </li>
        <li class="media">
            <img src="http://placehold.it/444x342" alt="Image">
            <div class="info">
                <h2>HEADER</h2>
                <div class="program-info">
                    <p><a href="#">Program Page</a></p>
                    <p><a href="#">Video</a></p>
                </div>
            </div>
        </li>
    </ul>
    <ul>
        <li class="media">
            <img src="http://placehold.it/444x342" alt="Image">
            <div class="info">
                <h2>HEADER</h2>
                <div class="program-info">
                    <p><a href="#">Program Page</a></p>
                    <p><a href="#">Video</a></p>
                </div>
            </div>
        </li>
        <li class="text">
            <div>
                Some Text.
            </div>
        </li>
        <li class="media">
            <img src="http://placehold.it/444x342" alt="Image">
            <div class="info">
                <h2>HEADER</h2>
                <div class="program-info">
                    <p><a href="#">Program Page</a></p>
                    <p><a href="#">Video</a></p>
                </div>
            </div>
        </li>
    </ul>
</div>

CSS:

*{box-sizing:border-box}.container{max-width:1140px;margin:0 auto;padding:0 10px}ul,ul li{padding:0}ul{list-style:none;margin:1% 0;font-size:0}ul li{display:inline-block;width:100%;margin:0 0 1%;height:100%;position:relative}ul li img{width:100%;display:block}ul li.text{background-color:#000;color:#FFF;padding:20px 10px;font-size:1.5rem;width:100%;vertical-align:top;text-align:center}@media (min-width:550px){ul li{width:50%}ul li.text div{margin:2%}}@media (min-width:1000px){ul li{width:39.5%;margin:0 .5%}ul li:first-child{margin-left:0}ul li:last-child{margin-right:0}ul li.text{width:19%;min-height:305px}}@media (min-width:1140px){ul li.text{min-height:341px}ul li.text div{margin:40% 0}}.info{background:rgba(255,255,255,.83);color:#000;font-size:2.4rem;left:10px;opacity:0;overflow:hidden;padding:3rem;position:absolute;top:10px;right:10px;bottom:10px;-webkit-transition:.6s;transition:.6s}.info:hover{opacity:1}

Answer 1

A combination of things here.

Flexbox for the equal heights, max-width where required, paddings/margin for spacing....oh, and positioning for the overlays.

 * { margin: 0; padding: 0; box-sizing: border-box; } .wrapper { max-width: 1140px; margin: auto; margin-top: 5px; border: 1px solid grey; display: flex; padding: 5px; } .wrapper > *:nth-child(2) { margin: 0 5px; } .text, header, imgwrap { flex: 1; } .text { width: 20%; padding: 1em; max-width: 222px; background: orange; display: flex; justify-content: center; align-items: center; } header { background: #bada55; position: relative; } .imgwrap .overlay, header .overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(155, 0, 65, .25); padding: 1em; font-weight: bold; color: #fff; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0.25s ease; } .imgwrap:hover .overlay, header:hover .overlay { opacity: 1; visibility: visible; } .imgwrap { width: 40%; position: relative; } .imgwrap img { width: 100%; display: block; max-width: 444px; } 

 <div class="wrapper"> <div class="text">Lorem ipsum dolor.</div> <header> <div class="overlay">Overlay Text</div> </header> <div class="imgwrap"> <img src="http://lorempixel.com/output/food-qc-444-250-3.jpg" alt="" /> <div class="overlay">Image text</div> </div> </div> <div class="wrapper"> <div class="imgwrap"> <img src="http://lorempixel.com/output/food-qc-444-250-3.jpg" alt="" /> <div class="overlay">Image text</div> </div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> <div class="imgwrap"> <img src="http://lorempixel.com/output/food-qc-444-250-3.jpg" alt="" /> <div class="overlay">Image text</div> </div> </div> 

Media queries can manage the rest.

Codepen Demo.