Make divs scalable and retain their image size - html

Question

Having a slight problem with these two divs. Firstly I would like them to be scalable. I know this is done through using percentages however I everytime I use percentages the divs come out of position. When I use width these are okay in Google Chrome but not IE, however they are obviously not scalable. Additionally I have a gray filter over the images which look seriously out of place if the divs are not perfectly next to eachother.
Please have a look at the code and let me know if I'm doing anything majorly wrong; which I can only presume that I am.
Firstly the link to the Jsfiddle and the full screen look, and now the code, the basic HTML:`
<div class="My-Gems">
<div class="item item-type-double"> <a class="item-hover">
<div class="item-info">
<div class="date">Branding</div>
<div class="line"></div>
<div class="headline">Money Matters</div>
<div class="line"></div>
</div>
<div class="mask"></div>
</a>
<div class="item-img">
<img src="http://s29.postimg.org/8safbuqmf/Money_Matters_Logo_gif.png " style="width:100%;" alt="" />
</div>
</div>
<div class="item item-type-double"> <a class="item-hover" href="https://www.youtube.com/watch?v=S74yj5rnvAo" target="_blank">
<div class="item-info">
<div class="date">Events</div>
<div class="line"></div>
<div class="headline">Metaphon Fitness</div>
<div class="line"></div>
</div>
<div class="mask"></div>
</a>
<div class="item-img">
<img src="http://s29.postimg.org/wrpgkar0n/Metaphon_Fitness.png" />
</div>
</div>
</div>
<!-- end of my-gems-->
`
And the CSS, again basic.
.My-Gems {
width: 100%;
height: 100%;
}
h2.Second-Header {
color: black;
font-weight:400;
font-family:'Abril Fatface', cursive;
font-size: 3em;
margin: 80px;
}
.item {
text-align:center;
float:left;
position:relative;
}
.item, .item-hover, .item-hover .mask, .item-img, .item-info {
width: 600.5px;
height: 600px;
}
.item-hover, .item-hover .mask, .item-img {
position:absolute;
top:0;
left:0;
}
.item-type-double .item-hover {
z-index:5;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity:0;
cursor:pointer;
display:block;
text-decoration:none;
text-align:center;
}
.item-type-double .item-info {
z-index:10;
color:#ffffff;
display:table-cell;
vertical-align:middle;
position:relative;
z-index:5;
}
.item-type-double .item-info .headline {
font-size:2.4em;
font-family:'open sans';
text-transform: uppercase;
width:90%;
margin:0 auto;
}
.item-type-double .item-info .date {
font-size:20px;
font-family:'Canter';
text-transform: uppercase;
}
.item-type-double .item-hover .mask {
background-color:#000;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity:0.5;
z-index:0;
}
.item-type-double .item-hover:hover .line {
width:90%;
}
.item-type-double .item-hover:hover {
opacity:1;
}
.item-img {
width:100%;
z-index:0;
}

Answer 1

First: you have one image with width:100% and another without, which would make one image bigger than the other.
Second: You should NOT use table cell display outside a 'table' otherwise it will work improperly in some browsers (firefox for example)
Third: By specification for the width:100% to work on all browsers it's parent must either be body or have a width setting itself, so each element in the tree must have a width:100%, except the first which should have width:50% for the purposes described, remember to remove margins, paddings and borders from all elements if they're not needed.
This should work: https://jsfiddle.net/r469x2at/17/embedded/result/
Reorganize HTML so we can have dynamic height:
Latest Works
<div class="item item-type-double">
<div class="item-img">
<img src="http://s29.postimg.org/8safbuqmf/Money_Matters_Logo_gif.png " style="width:100%;" alt="" />
</div> <a class="item-hover">
<div class="item-info">
<div class="mycell">
<div class="date">Branding</div>
<div class="line"></div>
<div class="headline">Money Matters</div>
<div class="line"></div>
</div>
</div>
<div class="mask"></div>
</a>
</div>
<div class="item item-type-double">
<div class="item-img">
<img src="http://s29.postimg.org/wrpgkar0n/Metaphon_Fitness.png" style="width:100%;" />
</div> <a class="item-hover" href="https://www.youtube.com/watch?v=S74yj5rnvAo" target="_blank">
<div class="item-info">
<div class="mycell">
<div class="date">Events</div>
<div class="line"></div>
<div class="headline">Metaphon Fitness</div>
<div class="line"></div>
</div></div>
<div class="mask"></div>
</a>
</div>
</div>
<!-- end of my-gems-->
Some CSS changes so we have dynamic height and auto-width:
.item {
text-align:center;
float:left;
position:relative;
width: 50%;
height: 100%;
}
.item-hover, .item-hover .mask, .item-img, .item-info {
width: 100%;
height: 100%;
}
.item-hover, .item-hover .mask {
position:absolute;
top:0;
left:0;
}
.item-type-double .item-hover {
z-index:5;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity:0;
cursor:pointer;
display:block;
text-decoration:none;
text-align:center;
}
.item-type-double .item-info {
z-index:10;
color:#ffffff;
display:table;
position:relative;
z-index:5;
}
.item-type-double .item-info div.mycell {
vertical-align:middle;
height: 100%;
display:table-cell;
}
EDIT: Answer was incomplete, https://jsfiddle.net/r469x2at/17/

Answer 2

I realised that the Alpha Mask hover was slightly overflowing the div which was caused by a small gap due to display:inline.
I thus added this to Gabriel's anwser.
.item-img img {
display:block
}
The final code is as follows, CSS
body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section {
margin: 0;
padding: 0;
border: 0;
}
.My-Gems {
width: 100%;
height: 100%;
}
h2.Second-Header {
color: black;
font-weight:400;
font-family:'Abril Fatface', cursive;
font-size: 3em;
margin: 80px;
}
.item {
text-align:center;
float:left;
position:relative;
}
.item {
width: 50%;
height: 100%;
}
.item-hover, .item-hover .mask, .item-img, .item-info {
width: 100%;
height: 100%;
}
.item-hover, .item-hover .mask {
position:absolute;
top:0;
height:100%;
left:0;
}
.item-type-double .item-hover {
z-index:5;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity:0;
cursor:pointer;
display:block;
text-decoration:none;
text-align:center;
}
.item-type-double .item-info {
z-index:10;
color:#ffffff;
display:table;
position:relative;
z-index:5;
}
.item-type-double .item-info div.mycell {
vertical-align:middle;
height: 100%;
display:table-cell;
}
.item-type-double .item-info .headline {
font-size:2.4em;
font-family:'open sans';
text-transform: uppercase;
width:90%;
margin:0 auto;
}
.item-type-double .item-info .date {
font-size:20px;
font-family:'Canter';
text-transform: uppercase;
}
.item-type-double .item-hover .mask {
background-color:#000;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity:0.5;
z-index:0;
}
.item-type-double .item-hover:hover .line {
width:90%;
}
.item-type-double .item-hover:hover {
opacity:1;
}
.item-img {
width:100%;
z-index:0;
}
.item-img img {
width:100%;
display:block
}
HTML:
<div class="My-Gems">
<h2 class="Second-Header">Latest Works</h2>
<div class="item item-type-double">
<div class="item-img">
<img src="http://s29.postimg.org/8safbuqmf/Money_Matters_Logo_gif.png " alt="" />
</div>
<a class="item-hover">
<div class="item-info">
<div class="mycell">
<div class="date">Branding</div>
<div class="line"></div>
<div class="headline">Money Matters</div>
<div class="line"></div>
</div>
</div>
<div class="mask"></div>
</a>
</div>
<div class="item item-type-double">
<div class="item-img">
<img src="http://s29.postimg.org/wrpgkar0n/Metaphon_Fitness.png" />
</div>
<a class="item-hover" href="https://www.youtube.com/watch?v=S74yj5rnvAo" target="_blank">
<div class="item-info">
<div class="mycell">
<div class="date">Events</div>
<div class="line"></div>
<div class="headline">Metaphon Fitness</div>
<div class="line"></div>
</div>
</div>
<div class="mask"></div>
</a>
</div>
</div>
<!-- end of my-gems-->
body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section {
margin: 0;
padding: 0;
border: 0;
}
.My-Gems {
width: 100%;
height: 100%;
}
h2.Second-Header {
color: black;
font-weight:400;
font-family:'Abril Fatface', cursive;
font-size: 3em;
margin: 80px;
}
.item {
text-align:center;
float:left;
position:relative;
}
.item {
width: 50%;
height: 100%;
}
.item-hover, .item-hover .mask, .item-img, .item-info {
width: 100%;
height: 100%;
}
.item-hover, .item-hover .mask {
position:absolute;
top:0;
height:100%;
left:0;
}
.item-type-double .item-hover {
z-index:5;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity:0;
cursor:pointer;
display:block;
text-decoration:none;
text-align:center;
}
.item-type-double .item-info {
z-index:10;
color:#ffffff;
display:table;
position:relative;
z-index:5;
}
.item-type-double .item-info div.mycell {
vertical-align:middle;
height: 100%;
display:table-cell;
}
.item-type-double .item-info .headline {
font-size:2.4em;
font-family:'open sans';
text-transform: uppercase;
width:90%;
margin:0 auto;
}
.item-type-double .item-info .date {
font-size:20px;
font-family:'Canter';
text-transform: uppercase;
}
.item-type-double .item-hover .mask {
background-color:#000;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity:0.5;
z-index:0;
}
.item-type-double .item-hover:hover .line {
width:90%;
}
.item-type-double .item-hover:hover {
opacity:1;
}
.item-img {
width:100%;
z-index:0;
}
.item-img img {
width:100%;
display:block
}
<div class="My-Gems">
<h2 class="Second-Header">Latest Works</h2>
<div class="item item-type-double">
<div class="item-img">
<img src="http://s29.postimg.org/8safbuqmf/Money_Matters_Logo_gif.png " alt="" />
</div>
<a class="item-hover">
<div class="item-info">
<div class="mycell">
<div class="date">Branding</div>
<div class="line"></div>
<div class="headline">Money Matters</div>
<div class="line"></div>
</div>
</div>
<div class="mask"></div>
</a>
</div>
<div class="item item-type-double">
<div class="item-img">
<img src="http://s29.postimg.org/wrpgkar0n/Metaphon_Fitness.png" />
</div>
<a class="item-hover" href="https://www.youtube.com/watch?v=S74yj5rnvAo" target="_blank">
<div class="item-info">
<div class="mycell">
<div class="date">Events</div>
<div class="line"></div>
<div class="headline">Metaphon Fitness</div>
<div class="line"></div>
</div>
</div>
<div class="mask"></div>
</a>
</div>
</div>
<!-- end of my-gems-->