Tiled image panels

<style>
#img1 {
background-image: url(//www.brookes.ac.uk/assets/0/1425/1426/2147484164/e0885b6b-321b-4a87-a173-473a00659960.jpg);
}
#img2 {
background-image: url(//www.brookes.ac.uk/assets/0/1425/1426/2147484555/2147495220/cac7d7f8-44d0-492b-9b2e-4d67bbffd4f3.jpg);
}
#img3 {
background-image: url(//www.brookes.ac.uk/assets/0/1425/1426/2147484555/2147495220/6b59cfea-a85b-467d-b332-094bcbd97d3c.jpg);
}
.tiled-image {
height: 240px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.tiled-overlay {
position: absolute;
right: 10px;
bottom: 10px;
left: 10px;
}
.tiled-overlay h3 {
font-size: 18px;
line-height: 23px;
padding: 0;
margin: 0;
display: inline;
}
.tiled-body {
padding: 10px; 
}
.tiled .box-link span { 
display: inline;
padding: 6px 12px;
line-height: 25px;
background: rgba(199, 5, 64, 0.7);
/* Needs prefixing */
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.tiled .box-link:hover span, 
.tiled .box-link:focus span, 
.tiled .box-link:active span,
.tiled .box-link:hover, 
.tiled .box-link:focus, 
.tiled .box-link:active {
background: rgba(199, 5, 64, 1);
-webkit-transition: all .3s ease-out; 
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
</style>
<div class="row flex-row tiled">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <a href="your-link-here" title="Develop your abilities" class="flex-item box-link bg-lightgrey fg-darkgrey">
            <div class="tiled-image" id="img3">
                <div class="tiled-overlay">
                    <h3 class="sm-title hblack text-uppercase"><span class="fg-white">Develop your abilities&nbsp;»</span></h3>
                </div>
            </div>
            <div class="tiled-body">
                <p>At Brookes, you’ll have the opportunity to think in new ways and to develop your strengths and skills.</p>
            </div>
        </a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <a href="your-link-here" title="Stats and rankings" class="flex-item box-link bg-lightgrey fg-darkgrey">
            <div class="tiled-image" id="img1">
                <div class="tiled-overlay">
                    <h3 class="sm-title hblack text-uppercase"><span class="fg-white">Stats and rankings&nbsp;»</span></h3>
                </div>
            </div>
            <div class="tiled-body">
                <p>A quick visual round-up of some recent accolades, from student satisfaction scores to teaching quality and employability teaching quality and employability.</p>
            </div>
        </a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <a href="your-link-here" title="Oxford learning opportunities" class="flex-item box-link bg-lightgrey fg-darkgrey">
            <div class="tiled-image" id="img2">
                <div class="tiled-overlay">
                    <h3 class="sm-title hblack text-uppercase"><span class="fg-white">Oxford learning opportunities&nbsp;»</span></h3>
                </div>
            </div>
            <div class="tiled-body">
                <p>Oxford is a cultural hub and a centre for leading industries, providing a wide range of learning opportunities for our students.</p>
            </div>
        </a>
    </div>
</div>