JSFiddle: http://jsfiddle.net/lustre/c6cwbjLz/13/
Basically, I've been trying to make a full-screen 3x2 grid, and have essentially achieved it, however I'm seeing a tiny 1px vertical line between the 2nd and 3rd columns when I hover over the grid items. Where is this coming from, and how do I get rid of it?
I've read elsewhere that including -webkit-backface-visibility: hidden; can help when using 3D transformations; however I'm not using any 3D transformations. This line does work to a degree, in that it hides the white line on some sizes, but on others it still appears (I assume when it's not quite divisible by 3?). I've commented this line out in the JSFiddle below so you can easily see the white line which appears on hover.
Below is a screenshot of what I'm seeing, in case it's not happening for you. Though so far I've only encountered this problem in Chrome.
JSFiddle: http://jsfiddle.net/lustre/c6cwbjLz/13/
jQuery(document).ready(function () {
gridSize();
});
jQuery(window).resize(function () {
gridSize();
});
/* Returns scrollbar width*/
function getScrollBarWidth() {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild(inner);
document.body.appendChild(outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild(outer);
return (w1 - w2);
};
function gridSize() {
if ($('.box').width() > 0) {
var w = $(window).width();
} else {
var w = $(window).width() - getScrollBarWidth();
}
var h = $(window).height();
var thirdw, halfw, halfh, overboxw, overboxh;
/* Width needs to be 33%, height needs to be 50% */
/* Full screen sizes */
thirdw = w / 3;
halfh = h / 2;
$('.box').css({
"width": thirdw,
"height": halfh
});
/* Set overbox size */
overboxw = thirdw - 60;
overboxh = halfh - 60;
$('.box .overbox').css({
"width": overboxw,
"height": overboxh
});
/* Resize the images based on the ratio */
if (thirdw > halfh) {
jQuery('.box img').css({
"height": halfh +"px",
"width": "auto"
});
} else {
jQuery('.box img').css({
//"height": halfh +"px"
});
}
/*
Bottom's affected:
.box:hover .title == 110px (needs moving up depending on width of box as content beneath grows in height)
*/
}body {
margin:0;
padding:0;
}
.boxWrapper {
font-size:0;
/*-webkit-backface-visibility: hidden;*/
}
.box {
cursor: pointer;
height: 400px;
position: relative;
overflow: hidden;
width: 300px;
z-index:400;
display:inline-block;
}
.gradient {
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(128, 128, 128, 0)), color-stop(100%, rgba(0, 0, 0, 0.5)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#80000000', GradientType=0);
/* IE6-9 */
z-index:401;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
.box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
z-index:400;
}
.box .title {
position:absolute;
bottom:20px;
left:25px;
text-transform:uppercase;
z-index:404;
color:#fff;
font-size:30px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .title:after {
content:'';
margin-top:5px;
display:block;
height:4px;
width:60%;
background:#fff;
}
.box:hover .title {
bottom:110px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .overbox {
background-color: rgba(246, 48, 62, 0.85);
margin: 10px;
padding: 20px;
width: 240px;
height: 340px;
position: absolute;
color: #fff;
z-index: 403;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
}
.box:hover .overbox {
opacity: 1;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .overbox .tagline {
position:absolute;
bottom:0;
padding-right: 20px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
font-size:16px;
}
.box:hover .overbox .tagline {
bottom:20px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}<div class="boxWrapper">
<div class="box">
<div class="gradient"></div>
<img src="http://www.webtutorialplus.com/Images/css-effects-image/1.jpg" alt="Web Tutorial Plus - Demo" width="300" height="400" />
<div class="title">Title</div>
<div class="overbox">
<div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
</div>
</div>
<div class="box">
<div class="gradient"></div>
<img src="http://www.webtutorialplus.com/Images/css-effects-image/1.jpg" alt="Web Tutorial Plus - Demo" width="300" height="400" />
<div class="title">Title</div>
<div class="overbox">
<div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
</div>
</div>
<div class="box">
<div class="gradient"></div>
<img src="http://www.webtutorialplus.com/Images/css-effects-image/1.jpg" alt="Web Tutorial Plus - Demo" width="300" height="400" />
<div class="title">Title</div>
<div class="overbox">
<div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
</div>
</div>
<div class="box">
<div class="gradient"></div>
<img src="http://www.webtutorialplus.com/Images/css-effects-image/1.jpg" alt="Web Tutorial Plus - Demo" width="300" height="400" />
<div class="title">Title</div>
<div class="overbox">
<div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
</div>
</div>
<div class="box">
<div class="gradient"></div>
<img src="http://www.webtutorialplus.com/Images/css-effects-image/1.jpg" alt="Web Tutorial Plus - Demo" width="300" height="400" />
<div class="title">Title</div>
<div class="overbox">
<div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
</div>
</div>
<div class="box">
<div class="gradient"></div>
<img src="http://www.webtutorialplus.com/Images/css-effects-image/1.jpg" alt="Web Tutorial Plus - Demo" width="300" height="400" />
<div class="title">Title</div>
<div class="overbox">
<div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
</div>
</div>
</div>
aaaaaaaaaaa
bbbbbbbbbbb
ccccccccccc
