Greetings,
I have the following images:
My goal is to achieve this look:
I have floated the flags to the right and set individual images to float left in my CSS style. However, I am struggling to add text-boxes on top of the images. Any tips or suggestions would be greatly appreciated.
#flagLine {
float: right;
padding-right: 50px;
padding-left: 10px;
padding-bottom: 10px;
}
#flagLine a img {
float: left;
position: relative;
margin: 10px 10px 10px 10px;
border-style: solid;
border-color: black;
border-width: 1px;
}
#flagLine h4 {
vertical-align: top;
}
<div id="flagLine">
<a href="https://internal.cs.ncl.ac.uk/modules/2013-14/csc1026/flags/letters/100_ICS_Alpha.svg.png"><img src="1.png" title='"I have a diver down; keep well clear at slow speed."' /></a><h4>A-Alpha</h4>
<a href="https://internal.cs.ncl.ac.uk/modules/2013-14/csc1026/flags/letters/100_ICS_Bravo.svg.png"><img src="2.png" title='"I am taking in, or discharging, or carrying dangerous goods."'/></a><h4>B-Bravo</h4>
<a href="https://internal.cs.ncl.ac.uk/modules/2013-14/csc1026/flags/letters/100_ICS_Charlie.svg.png"><img src="3.png" title='"Affirmative."' /></a>
Thank you in advance for any assistance provided.