Panels example

by Hugo Carneiro

HTML

<div class="container">
    <div class="row">
        <div class="col-md-3">
 <!-- CODE YOU CAN USE -->
 <!--
 - If you want the overlay with some transparency in a different colour, let me know the colour.
 - Feel free to edit the styles to your liking, I would just recommend keeping the WIDTH at 100%.
 -->
            <div style="background-image:url(http://cdn.thedailybeast.com/content/dailybeast/articles/2014/08/27/20-things-you-didn-t-know-about-the-shawshank-redemption/jcr:content/image.crop.800.500.jpg/1412030800288.cached.jpg); background-position:center center; background-size:cover; width:100%; height:180px; margin-top:10px; position:relative; border:10px solid #d9d9d9;">
                <div style="position:absolute; bottom:0; left:0; right:0; background-color:rgba(255,255,255,0.8); padding:10px;">
                    Learn more
                </div>
            </div>
 <!-- END OF CODE YOU CAN USE -->
            
        </div>
        <div class="col-md-3">
            
            <div style="background-image:url(http://images.amcnetworks.com/ifc.com/wp-content/uploads/2014/05/shawshank-list.jpg); background-position:center center; background-size:cover; width:100%; height:180px; margin-top:10px; position:relative; border:10px solid #d9d9d9;">
                <div style="position:absolute; bottom:0; left:0; right:0; background-color:rgba(255,255,255,0.8); padding:10px;">Learn more</div>
            </div>
            
        </div>
        <div class="col-md-3">
            
            <div style="background-image:url(http://images.amcnetworks.com/ifc.com/wp-content/uploads/2014/07/shawshank-redemption-1.jpg); background-position:center center; background-size:cover; width:100%; height:180px; margin-top:10px; position:relative; border:10px solid #d9d9d9;">
                <div style="position:absolute; bottom:0; left:0; right:0; background-color:rgba(255,255,255,0.8); padding:10px;">Learn more</div>
            </div>
            
       ...