How to make an entire square div clickable with CSS?

Question

I'm working on this demo : http://jsfiddle.net/hjkryc41/1/

It's about a responsive grid in CSS in an horizontal scrolling page. There are several square divs stacked from top to bottom, and left to right. Each square contains a link, a picture and a title.

Here is the HTML :

<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/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 class="item"><a href="http://arkhana.fr/img/7.png"><img src="http://arkhana.fr/img/7.png" /></a><div class="title">test7</div></div>
<div class="item"><a href="http://arkhana.fr/img/8.png"><img src="http://arkhana.fr/img/8.png" /></a><div class="title">test8</div></div>
<div class="item"><a href="http://arkhana.fr/img/9.png"><img src="http://arkhana.fr/img/9.png" /></a><div class="title">test9</div></div>
<div class="item"><a href="http://arkhana.fr/img/10.png"><img src="http://arkhana.fr/img/10.png" /></a><div class="title">test10</div></div>

</div>

Here is the 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 would like to make each square entirely clickable. The problem is that the squares are not clickable in the title zone.

Is it possible to make the squares entirely clickable without including a second link in the div ?

@cport1 That won't include the `div.title` following each link, which OP wants to include in the clickable area. — Paul Roub, Mar 10 '15 at 19:32

Hareesh · Accepted Answer · 2015-03-10T19:44:00.997

1

Arrange your each div like this

<div class="item">
   <a href="http://arkhana.fr/img/1.png">
       <img src="http://arkhana.fr/img/1.png" /><span class="title">test1</span>
   </a>
</div>

Now your anchor tag will wrap .title div too.

edited Mar 10 '15 at 19:44

answered Mar 10 '15 at 19:37

Hareesh

6,770
4
33
60

Thank you. Is it correct to include a `div` inside an `a` ? – Guillaume Mar 10 '15 at 19:39
1

Probably worth nothing that this is invalid in HTML 4 but is fine in HTML5: http://stackoverflow.com/a/1828032/717383 – James Montagne Mar 10 '15 at 19:39
1

you can change the inner div to `span` – Hareesh Mar 10 '15 at 19:41

score 1 · Answer 2 · answered Mar 10 '15 at 19:41

1

Quick fix: Add pointer-events none to .title:

.title { 
  pointer-events: none;
}

Fiddle

answered Mar 10 '15 at 19:41

Rick Hitchcock

35,202
5
48
79

How to make an entire square div clickable with CSS?

2 Answers2