CSS Two grid DIVs, images and text gives me blackout - html

Question

I've been playing with this grid for a while, it's a two grid system in which i'm trying to add two different images. I've added the images with success. However, It's when i try to make two separate containers for the text i would like to place over the images everything goes wrong. Been trying to wrap my head around this for hours without results.
I did succeed to add text over the image with the one column. However, these two columns just won't let me.
What is the best way to solve this?
CSS
/* SECTIONS */
.section-ad {
clear: both;
padding: 0px;
margin:0;
}
/* COLUMN */
.col {
display: block;
float:left;
margin: 0% 0% 0% 1%;
}
.col:first-child { margin-left: 0; }
/* GROUP */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* TWO GRID */
.span_2_of_2 {
width: 100%;
height: auto;
}
.span_1_of_2 {
width: 49.5%;
height: auto;
}
.span_2_of_2 img {
width: 100%;
height: auto;
}
.span_1_of_2 img {
width: 100%;
height: auto;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.col {
margin: 0% 0 0% 0%;
}
}
#media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}
HTML
<div class="section-ad group">
<div class="col span_1_of_2">
<img src="https://cdn.shopify.com/s/files/1/0786/5107/files/main-sale-large.jpg?11274335160121521292" />
</div>
<div class="col span_1_of_2">
<img src="https://cdn.shopify.com/s/files/1/0786/5107/files/main-plain-x450_ab05c8e5-7269-4d98-b510-8ba5127db9c4.jpg?13010707129353802904" />
</div>
</div>
Best Regards,
Robin.

Answer 1

You can place text over image following way.
Add span inside col div and add text inside. And give position:absolute and parent div to position:relative;. Then you can set it's position using left and right value.
.section-ad {
clear: both;
padding: 0px;
margin:0;
}
/* COLUMN */
.col {
display: block;
float:left;
margin: 0% 0% 0% 1%;
position: relative;
}
.col:first-child { margin-left: 0; }
/* GROUP */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* TWO GRID */
.span_2_of_2 {
width: 100%;
height: auto;
}
.span_1_of_2 {
width: 49.5%;
height: auto;
}
.span_2_of_2 img {
width: 100%;
height: auto;
}
.span_1_of_2 img {
width: 100%;
height: auto;
}
span {
color: #000000;
font-size: 25px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.col {
margin: 0% 0 0% 0%;
}
}
#media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}
<div class="section-ad group">
<div class="col span_1_of_2">
<img src="https://cdn.shopify.com/s/files/1/0786/5107/files/main-sale-large.jpg?11274335160121521292" />
<span>Some text</span>
</div>
<div class="col span_1_of_2">
<img src="https://cdn.shopify.com/s/files/1/0786/5107/files/main-plain-x450_ab05c8e5-7269-4d98-b510-8ba5127db9c4.jpg?13010707129353802904" />
<span>Some text</span>
</div>
</div>

Answer 2

Thanks to all your replies.
Ketan - Altough your solution worked, it did not fit my needs.
However, thanks to your reply i managed to surpass my blackout. So i owe it too you anyway. Thanks!
This might now be the best way,
but this is how i did it.
CSS
CSS
/* TVÅ KOLUMN ADVERT # 705x450 */
.span_1_container {
position: absolute;
top: 80%;
left: 25%;
z-index: 0;
padding: 0;
padding: 1.2em;
font-size: .5em;
text-align: center;
width: 45%;
}
.span_1_heading {
font-size: 20px;
line-height: 100px;
display:inline-block;
position: relative;
}
.span_2_container h2:before {
content: '';
border-top: 1px solid #383a4f;
position: absolute;
width: 25%;
left: 35%;
top: 50px;
}
.span_2_container {
position: absolute;
top: 25%;
left: 0%;
z-index: 0;
padding: 0;
padding: 1.2em;
font-size: .5em;
text-align: center;
width: 45%;
}
.span_2_container h2:after {
content: '';
border-bottom: 1px solid #383a4f;
position: absolute;
width: 25%;
left: 35%;
bottom: 50px;
padding-bottom: 20px;
}
<div class="section-ad group">
<div class="col span_1_of_2">
<img src="https://cdn.shopify.com/s/files/1/0786/5107/files/main-sale-large.jpg?5000542013708637763" />
<div class="span_1_container">
SHOP NOW</div>
</div>
<div class="col span_1_of_2">
<img src="https://cdn.shopify.com/s/files/1/0786/5107/files/main-plain-x450_ab05c8e5-7269-4d98-b510-8ba5127db9c4.jpg?13010707129353802904" />
<div class="span_2_container">
<h2 class="span_2_heading" style="font-weight: normal; color: #383a4f;">Pocketsquares</h2>
<p style="font-family: 'Lato'; font-size: 14px; color: #383a4f; line-height: 15px; padding-bottom: 20px;">Explore our premium pocketsquares.</p>
SHOP NOW</div>
</div>
</div>