Here's a project I'm currently working on: http://jsfiddle.net/hjkryc41/1/
The focus is on creating a responsive grid in CSS within a horizontally scrolling page. The grid consists of square divs arranged from top to bottom and left to right, each containing a link, an image, and a title.
Below is the HTML structure:
<div class="masonry">
<div class="item"><a href="http://arkhana.fr/img/2.png"><img src="http://arkhana.fr/img/2.png" /></a><div class="title">test2</div></div>
<div class="item"><a href="http://arkhana.fr/img/3.png"><img src="http://arkhana.fr/img/3.png" /></a><div class="title">test3</div></div>
<div class="item"><a href="http://arkhana.fr/img/4.png"><img src="http://arkhana.fr/img/4.png" /></a><div class="title">test4</div></div>
<div class="item"><a href="http://arkhana.fr/img/5.png"><img src="http://arkhana.fr/img/5.png" /></a><div class="title">test5</div></div>
<div class="item"><a href="http://arkhana.fr/img/6.png"><img src="http://arkhana.fr/img/6.png" /></a><div class="title">test6</div></div>
...
</div>
And here's the accompanying CSS:
body {
margin: 0;
background: #e9e9e9;
height:100%;
padding:1em;
}
.masonry {
position:absolute;
height:auto;
top:0px;
bottom:0px;
margin: 0;
padding: 20px;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
-moz-column-width: 220px;
-webkit-column-width: 220px;
column-width: 220px;
}
.item {
width:100%;
display: block;
position:relative;
margin: 0 0 1.5em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.item img {
width:100%;
}
.title {
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.8));
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 4em 1em 1em 1em;
color:white;
font-family:'open sans';
font-weight:100;
font-size:16px;
line-height:25px;
text-align:right;
}
I'm trying to achieve full clickability for each square element. However, there seems to be an issue with the title zone not being clickable. Is there a way to make the entire square clickable without adding a secondary link inside the div?