The alignment command I used with a percentage value% (left:10%, bottom: 20%;) for an image within a position:relative div is not responding. Is there a solution to fix this issue? It's worth noting that the images are contained in a div set at 50%
You can view the jsfiddle here.
Thank you in advance!
HTML
<!-- -- -- LEFT SIDE -- -- -->
<aside class="half left">
<section class="reform" style="right: 0; top: 30px;">
<img width="200px" src="http://reform.lt/data/images/2013/01/tumblr-mggblgyswc1qabyt1o1-500.jpg" alt="Selected Image" title="Image Title" />
<span class="caption label"><span class="parenthesis">(</span>TOP working<span class="parenthesis">)</span></span>
<span class="caption">
<p>SETTING</p>
<p> right: 0; top: 30px; </p>
</span>
</section>
<section class="reform" style="left: 50px; bottom: 30px;">
<img width="300px" src="http://images.tate.org.uk/sites/default/files/styles/grid-normal-8-cols/public/images/markg_gerhardr_nicks.jpg?itok=D7g05qpV" alt="Selected Image" title="Image Title" />
<span class="caption label"><span class="parenthesis">(</span>BOTTOM not working<span class="parenthesis">)</span></span>
<span class="caption">
<p>SETTING</p>
<p> left: 50px; bottom: 30px; </p>
</span>
</section>
</aside>
<!-- RIGHT SIDE -->
<aside class="half right">
<section class="reform" style="right: 10%; top: 40%;">
<img width="300px" src="http://reform.lt/data/images/2014/09/d4991784x.jpg" alt="Selected Image" title="Image Title" />
<span class="caption label"><span class="parenthesis">(</span>PERCENTAGE not working<span class="parenthesis">)</span></span>
<span class="caption">
<p>SETTING</p>
<p> right: 10%; top: 40%; </p>
</span>
</section>
</aside>
CSS
/* PRIMARY */
aside.half {
position: relative;
width: 50%;
height: 100%;
}
aside.half.left {
float: left;
background: #dbdbdb;
}
aside.half.right {
float: right;
background: #b2b2b2;
}
section.reform {
display: block;
position: absolute;
text-align: center;
}
section.reform img {
filter: grayscale(1);
-webkit-filter: grayscale(1) brightness(0.9);
-moz-filter: grayscale(1) brightness(0.9);
-o-filter: grayscale(1) brightness(0.9);
-ms-filter: grayscale(1) brightness(0.9);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
cursor: pointer;
max-width: 100%;
height: auto;
}
section.reform:hover img {
filter: grayscale(0.1) brightness(1);
-webkit-filter: grayscale(0.1) brightness(1);
-moz-filter: grayscale(0.1) brightness(1);
-o-filter: grayscale(0.1) brightness(1);
-ms-filter: grayscale(0.1) brightness(1);
}
section.reform span.caption {
display: none;
position: absolute;
text-align: center;
padding-top: 25px;
width: 100%;
height: auto;
}
section.reform:hover span.caption {
display: block;
}
section.reform span.caption p {
font: 11px/15px 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #4d4d4d;
margin: 0;
padding: 0;
}
section.reform span.caption p + p {
color: #999999;
}
section.reform span.caption.label {
display: block;
font-size: 23px;
font-family:'Phenotype S', times;
}
section.reform:hover span.caption.label {
display: none;
}
.parenthesis {
font: 19px/0 'American Typewriter', 'Andale Mono', Courier New, Courier;
font-weight: 100;
display: inline-block;
vertical-align: 2.9px;
padding: 0 5px 0 7px;
}
/* SECONDARY */
html {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
font: 100%;
color: #212121;
}