Menu icon Foundation
making a div overlay with em

Ahoy,

I am trying to make a div overlay for an image. The purpose of this is to make an half-transparent black div.
I can't find a way to do that without Javascript or nesting DIVs - since I can't get the parent's EM value.

Since Foundation works with EMs, the margin between columns is set by the size of the font of the body.
Therefor, Foundation automatically sets 0.9375em from the right and the left of an image.

If I try to make an overlay with a different font-size from the parent, the EM values change and this CSS code won't work:
margin-left: 0.9375em;
margin-left: 0.9375em;
width: calc(100% - (0.9375em * 2));

Here's a quick edit, showing that it'll work with a font-size of 15px, but won't work if I set the font-size for 50px:
http://codepen.io/yossih/pen/pkIvK

I am trying to make it work with pure CSS. It could work with pixels, but not EMs..

Any creative ideas?

<style>
.box:after {
  top:0;
  left:0;
  margin: 0;
  padding: 0;
  width:100%;
  height:40%;
  margin-left: 0.9375em;
  margin-left: 0.9375em;
  width: calc(100% - (0.9375em * 2));
  position: absolute;
  content: '+dss';
  /*font-size: 15px; //this would work! */
  font-size: 50px;
  text-align: center;
  display: block;
  background: rgba(0, 0, 0, 0.6); 
  color: white;
  pointer-events: none;
}
</style>

<style>
  body { font-size: 15px; }
</style>

<div class="wee">
  checking the width of this babe..
</div>

<div class="row" style="margin-top:20px;">
   <div class="large-3 columns">
       <img class="test" alt="slide image" src="http://tonova.typepad.com/thesuddencurve/images/biel5.jpg">
   </div>
   <div class="large-3 columns">
     <div class="box">
        <img class="testy" alt="slide image" src="http://www.mtv.com/onair/diary/flipbooks/jessica_biel/images/diary_biel03.jpg">
     </div>
   </div>
   <div class="large-3 columns">
     <img class="test" alt="slide image" src="http://www.iphotoscrap.com/Image/547/1222244638-m.jpg">
   </div>
   <div class="large-3 columns">
     <div class="box">
     <img class="test" alt="slide image" src="http://fashionscansremastered.files.wordpress.com/2014/02/fashion_scans_remastered-nina_agdal-sports_illustrated_swimsuit-2014-scanned_by_vampirehorde-hq-2.jpg">
       </div>
   </div>
  </div>
   

   

overlayemdiv

Ahoy,

I am trying to make a div overlay for an image. The purpose of this is to make an half-transparent black div.
I can't find a way to do that without Javascript or nesting DIVs - since I can't get the parent's EM value.

Since Foundation works with EMs, the margin between columns is set by the size of the font of the body.
Therefor, Foundation automatically sets 0.9375em from the right and the left of an image.

If I try to make an overlay with a different font-size from the parent, the EM values change and this CSS code won't work:
margin-left: 0.9375em;
margin-left: 0.9375em;
width: calc(100% - (0.9375em * 2));

Here's a quick edit, showing that it'll work with a font-size of 15px, but won't work if I set the font-size for 50px:
http://codepen.io/yossih/pen/pkIvK

I am trying to make it work with pure CSS. It could work with pixels, but not EMs..

Any creative ideas?

<style>
.box:after {
  top:0;
  left:0;
  margin: 0;
  padding: 0;
  width:100%;
  height:40%;
  margin-left: 0.9375em;
  margin-left: 0.9375em;
  width: calc(100% - (0.9375em * 2));
  position: absolute;
  content: '+dss';
  /*font-size: 15px; //this would work! */
  font-size: 50px;
  text-align: center;
  display: block;
  background: rgba(0, 0, 0, 0.6); 
  color: white;
  pointer-events: none;
}
</style>

<style>
  body { font-size: 15px; }
</style>

<div class="wee">
  checking the width of this babe..
</div>

<div class="row" style="margin-top:20px;">
   <div class="large-3 columns">
       <img class="test" alt="slide image" src="http://tonova.typepad.com/thesuddencurve/images/biel5.jpg">
   </div>
   <div class="large-3 columns">
     <div class="box">
        <img class="testy" alt="slide image" src="http://www.mtv.com/onair/diary/flipbooks/jessica_biel/images/diary_biel03.jpg">
     </div>
   </div>
   <div class="large-3 columns">
     <img class="test" alt="slide image" src="http://www.iphotoscrap.com/Image/547/1222244638-m.jpg">
   </div>
   <div class="large-3 columns">
     <div class="box">
     <img class="test" alt="slide image" src="http://fashionscansremastered.files.wordpress.com/2014/02/fashion_scans_remastered-nina_agdal-sports_illustrated_swimsuit-2014-scanned_by_vampirehorde-hq-2.jpg">
       </div>
   </div>
  </div>