How do you make a div a clickable link with HTML5/CSS3 only?

Question

T'is a question as old as time, and as such the answers to the question are also as old as time.
I have tried many solutions, none of which have worked in the way I have wanted.

I am trying to make div .content1 wholly clickable link without any text or JS styling what-so-ever.
Do you have any suggestions?

body {
  background-image: url("Images/background-bean.jpg");
  background-size: contain;
}

h1 {
  background-image: url("Images/background-bean.jpg");
}

p {
  background-color: white;
  background-color: rgba(255, 255, 255, .85);
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 400px 400px 50px;
  grid-gap: 8px;
  background-image: url(Images/content/background_bean.jpg)
}

.nav {
  grid-column-start: 1;
  grid-column-end: 3;
  color: white;
}

.content1,
.content2,
.content3,
.content4 {
  background-color: #60330A;
  width: 100%;
  background-position: center;
  text-align: center;
}

.social {
  grid-column-start: 1;
  grid-column-end: 2;
  color: white;
}

.footer {
  grid-column-start: 2;
  grid-column-end: 3;
  color: white;
  text-align: right;
}

.content1 {
  background-image: url(Images/content/c1standin.jpg)
}

.content1:hover {
  transform: scale(1.05);
}

.content2 {
  background-image: url(Images/content/c2standin.jpg)
}

.content2:hover {
  transform: scale(1.05);
}

.content3 {
  background-image: url(Images/content/c3standin.jpg)
}

.content3:hover {
  transform: scale(1.05);
}

.content4 {
  background-image: url(Images/content/c4standin.jpg)
}

.content4:hover {
  transform: scale(1.05);
}

.a .content1:feature {
  position: relative;
}

.content1:feature a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-decoration: none;
  /* No underlines on the link */
  z-index: 10;
  /* Places the link above everything else in the div */
  background-color: #FFF;
  /* Fix to make div clickable in IE */
  opacity: 0;
  /* Fix to make div clickable in IE */
  filter: alpha(opacity=1);
  /* Fix to make div clickable in IE */
}

<div class="container">
  <div class="nav"><span class="bold">NAV</span> </div>
  <div class="content1">
    <a title="Our Products" class="content1" id="header-img" href="Images/content/c1standin.jpg"></a>
  </div>
  <div class="content2">CONTENT</div>
  <div class="content3">CONTENT</div>
  <div class="content4">CONTENT</div>
  <div class="social">SOCIALMEDIA</div>
  <div class="footer">
    <h6>Image Credit pixabay.com; Elliott Evans 2019</h6>
  </div>
</div>

Define "clickable". What do you want to happen? When do you want this to happen? — Martin, Mar 01 '19 at 20:21
"make div .content1 wholly clickable without any text styling whatsoever" clickable to doing what ? Enlarging the .content to full screen ? Can you use Javascript ? What are you trying to do with `:feature` ? — el-teedee, Mar 01 '19 at 20:23
@Martin Clickabke as a link to another page of the site. No JS. The :feature was something one of the websites I checked out told me to do. — Elliott Evans, Mar 01 '19 at 20:26
https://stackoverflow.com/a/17354432/912046 wrapping the `DIV` in a `A` is valid in HTML5. If it helps... — el-teedee, Mar 01 '19 at 20:27
Only way to do it without Javascript would be to wrap the entire element in an anchor tag. — APAD1, Mar 01 '19 at 20:31
@el-teedee that does not work, it horribly mutilates the div. https://i.imgur.com/hR25bgG.jpg — Elliott Evans, Mar 01 '19 at 20:32
it DOES work, you then have to update your CSS rules for the A to look like the old DIV — el-teedee, Mar 01 '19 at 20:33

score 4 · Answer 1 · answered Mar 01 '19 at 20:30

4

You need to put anchor tag outside div.

<a title="Our Products" class="content1" id="header-img" href="Images/content/c1standin.jpg">
 <div class="content1"></div>
</a>

answered Mar 01 '19 at 20:30

Rohit Shetty

494
3
8

Unfortunately it still puts the text in a small box up the top (https://i.imgur.com/FaYOHeZ.png) – Elliott Evans Mar 01 '19 at 20:42
Sorry I am not able to see your image. Which text 'Our Products'? – Rohit Shetty Mar 01 '19 at 20:48
It says "text" and it is at the very top – Elliott Evans Mar 01 '19 at 21:08
My guess is that it's because you've got the class "content1" on both the `` and its child `
`. The little slice at the top is probably the `
`.
– showdev Mar 01 '19 at 21:13
@ElliottEvans can you update the code snippet to reflect this change. – Rohit Shetty Mar 01 '19 at 21:49
@showdev that worked, thank you! Just need to vert align the text and it will be perfect. Thanks! – Elliott Evans Mar 02 '19 at 04:55

showdev · Answer 2 · 2019-03-01T20:47:57.307

As answered by Rohit Shetty, you can wrap your <div> elements in <a> elements, rather than the other way around. Also see Make Entire Div Clickable. Here's an example:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 400px 400px;
  grid-gap: 8px;
}

.content {
  background-color: #60330A;
  width: 100%;
  background-position: center;
  background-size: cover;
  text-align: center;
  transition: transform .3s;
}
.content:hover {
  transform: scale(1.05);
}

.content1 {
  background-image: url('https://picsum.photos/200/300?1')
}
.content2 {
  background-image: url('https://picsum.photos/200/300?2')
}
.content3 {
  background-image: url('https://picsum.photos/200/300?3')
}
.content4 {
  background-image: url('https://picsum.photos/200/300?4')
}

<div class="container">
  <a class="content content1" title="Our Products" href="https://www.example.com">
    <div>OUR PRODUCTS</div>
  </a>
  <a class="content content2">CONTENT</a>
  <a class="content content3">CONTENT</a>
  <a class="content content4">CONTENT</a>
</div>

Alternatively (but probably unnecessarily), in order to make your <a> elements fill their parent <div> elements, you can set their size to width:100% and height:100%, like so:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 400px 400px;
  grid-gap: 8px;
}

.content {
  background-color: #60330A;
  width: 100%;
  background-position: center;
  background-size: cover;
  text-align: center;
  transition: transform .3s;
}
.content:hover {
  transform: scale(1.05);
}

.content a {
  display: block;
  width: 100%;
  height: 100%;
}

.content1 {
  background-image: url('https://picsum.photos/200/300?1')
}
.content2 {
  background-image: url('https://picsum.photos/200/300?2')
}
.content3 {
  background-image: url('https://picsum.photos/200/300?3')
}
.content4 {
  background-image: url('https://picsum.photos/200/300?4')
}

<div class="container">
  <div class="content content1">
    <a title="Our Products" href="https://www.example.com">OUR PRODUCTS</a>
  </div>
  <div class="content content2">CONTENT</div>
  <div class="content content3">CONTENT</div>
  <div class="content content4">CONTENT</div>
</div>

However, unless you have a specific reason for an additional <div>, I suggest removing them and just using the <a> elements in your grid:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 400px 400px;
  grid-gap: 8px;
}

.content {
  background-color: #60330A;
  width: 100%;
  background-position: center;
  background-size: cover;
  text-align: center;
  transition: transform .3s;
}
.content:hover {
  transform: scale(1.05);
}

.content1 {
  background-image: url('https://picsum.photos/200/300?1')
}
.content2 {
  background-image: url('https://picsum.photos/200/300?2')
}
.content3 {
  background-image: url('https://picsum.photos/200/300?3')
}
.content4 {
  background-image: url('https://picsum.photos/200/300?4')
}

<div class="container">
  <a class="content content1" title="Our Products" href="https://www.example.com">OUR PRODUCTS</a>
  <a class="content content2">CONTENT</a>
  <a class="content content3">CONTENT</a>
  <a class="content content4">CONTENT</a>
</div>

How do you make a div a clickable link with HTML5/CSS3 only?

2 Answers2