This is a follow-up to my previous question about implementing a grid of floating boxes - https://community.docebo.com/search/activity/topics?userid=6993. 

I was able successfully implement my box design using a CSS grid inside of an HTML widget. Right now it looks like this. 

One of the my requirements is that each box be a link. To extend the active link area over the entire box, and to get the text positioning the way I wanted it to be be, I set each link to be a flexbox. So I currently have a grid layout with a flex box within each grid item if that makes sense. 

Next, I want to add an image to the top portion of the “Instructor Led Training” box, like this: 

How can I do this while meeting the following requirements? 

1. The image remains constrained within the existing borders of the Instructor-Led Training box
2. The link functionality is unaffected

All of my attempts to do this so far have either broken the grid, or broken the link. 

Here’s what the code for the widget looks like currently.

All of the CSS in the <style> element at the top lives in the Style section of Configure branding and look.

The <div> at the bottom “vtx_gc_001” is the code that lives in the HTML widget on the page. 

<style>
.vtx_gc_001 {
    display: grid;
    height: 450px;
    /*padding: 10px;*/
    gap:30px;
    background-color: #f1f1f1;

}
.vtx_gi {
    border-radius: 50px;
    display: flex;
    width: 100%;
	height: 100%;
	/*justify-content: center;*/
	/*align-items: center;*/
    /*align-items: center;*/ 
    /*justify-content: center;*/
    /*padding: 20px;*/
    /*font-size: 30px;*/
    /*text-align: center;*/
}

#vtxgi1 {
	grid-column: 1 / span 2;
	background-color: #00943c;
}

#vtxgi2 {

    grid-row: 2 / 4;
    background-color: #008299;
    border-radius: 0px;
    border-bottom-right-radius: 50px;
    max-height: 200px;

}

#vtxgi3 {
	grid-column: 2;
    grid-row: 2;
    background-color: #BEC1C3;
}

#vtxgi4{
	grid-column: 2;
    grid-row: 3;
    background-color: #00609C;

}

#vtxgi5 {
	grid-column: 1 /span 2;
    grid-row: 4;
    background-color: #F3CF40;

}

#vtx_a1, 
#vtx_a2,
#vtx_a3,
#vtx_a4,
#vtx_a5

{
	display: flex;
	align-self: last baseline;

	}

.vtx_grid_a {

	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;

} 


</style>



<div class="vtx_gc_001"style="grid-template-columns: auto auto;grid-template-rows: auto auto auto auto;">
  <div class="vtx_gi" id="vtxgi1"><a href="https://vertexinc.cventevents.com/event/474a32aa-8375-4d1d-9462-8634c8d2d583/websitePage:012cdbf9-f1e0-4f63-a3c4-87721ee58474?RefId=us-home-cm-university-attendee&rt=8eGNBUYg8Ey12a5hJATG8A" class="vtx_grid_a"id="vtx_a1" style="padding:20px;padding-left:30px;color:white;font-weight:bold;font-size:20px;">Exchange 2024</a></div>
  <div class="vtx_gi" id="vtxgi2"><a href="https://university.vertexinc.com/pages/76/instructor-led-training-schedule" class="vtx_grid_a" id="vtx_a2" style="padding:20px;padding-left:40px;text-align:center;color:white;font-weight:bold;font-size:20px;">Instructor Led Training</a></div>
  <div class="vtx_gi" id="vtxgi3"><a href="https://university.vertexinc.com/learn/catalog" class="vtx_grid_a" id="vtx_a3" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Course Catalog</a></div>  
  <div class="vtx_gi" id="vtxgi4"><a href="https://university.vertexinc.com/pages/90/partners" id="vtx_a4" class="vtx_grid_a" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Partner Resources</a></div>
  <div class="vtx_gi" id="vtxgi5"><a href="https://university.vertexinc.com/pages/104/get-certified" class="vtx_grid_a" id="vtx_a5" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Get Certified!</a></div> 
</div>

<img src="https://cdn5.dcbstatic.com/files/v/e/vertexlearning_docebosaas_com/userfiles/13168/ilt.jpg" alt="instructor teaching a class" style="object-fit:cover;overflow:hidden;"/>