Overlay + Center/Right Align

Without knowing the size of the base element how can I retain it's center alignment while overlaying a box in the top corner.

by Terri Swallow

HTML

<h3>Center Align</h3>
<p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="aligncenter wrapme" style="width:300px"></p>
    
    <p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="aligncenter nowrap" style="width:300px"></p>
        
<h3>Left Align</h3>
<p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="alignleft wrapme" style="width:300px"></p>
    
    <p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="alignleft nowrap" style="width:300px"></p>
        
        
<h3>Right Align</h3>
<p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="alignright wrapme" style="width:300px"></p>
    
    <p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="alignright nowrap" style="width:300px"></p>

    <p><a href="https://www.flickr.com/photos/fanz/3493791131" title="Puppy by Francois de Halleux, on Flickr">Photo by Francois de Halleux via Flickr (Creative Commons by-nc-nd)</a></p>

CSS

.aligncenter {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.alignleft {
  display: block;
  margin-right: auto;
  margin-left: 0;
}
.alignright {
  display: block;
  margin-right: 0;
  margin-left: auto;
}

.wrapper {
  position: relative;
  display: inline-block;
}
.countbox {
  position: absolute;
  bottom: 10px;
  right: 10px;
    background-color:#fff;
    padding:10px;
}

JavaScript

$( document ).ready(function() {
    $('img.wrapme').each(function(){
        $(this).wrap('<div class="wrapper"></div>');
        
        // This is not ideal but used to illustrate the idea quickly
        if ($(this).hasClass('alignright')) {
            $(this).parent().addClass('alignright');
        } else if ($(this).hasClass('aligncenter')) {
            $(this).parent().addClass('aligncenter');
        } else if ($(this).hasClass('alignleft')) {
            $(this).parent().addClass('alignleft');
        }
        
        $(this).parent().append('<div class="countbox">View Details</div>');
    });
});