I'm currently facing a slight issue with these two divs. I want them to be scalable, which I know can be achieved by using percentages, but every time I do so, the divs end up out of position. When I try setting widths, they look fine in Google Chrome but not in IE, and they are clearly not scalable. Also, there's a gray filter over the images that looks odd when the divs are not perfectly aligned next to each other.
If you could take a look at the code and let me know if I'm making any major mistakes, which I assume I am.
Firstly, here is the link to the Jsfiddle and the full-screen view. And now, the code, starting with 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-->
`
Next is the CSS code, keeping it simple as well:
.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;
}