Only make a centered image a link instead of the whole parent div

Question

I have images that are centered within their parent divs and I would only like for the images to be clickable links instead of the whole divs themselves. I'm not quite sure what the problem is, so any help would be greatly appreciated.

Here is my code:

HTML:

    <div class="banner_column">
        <a href="#">
        <img src="images/image1.png" alt="Image 1" >
        </a>
        <h1>Check Out Link Above</h1>
        <p>Some text here</p>
    </div>

CSS:

.banner_column {
   width:25%;
   display:inline-block;
   float:left;
   margin-bottom:60px;
}

.banner_column img {
   display:block;
   width:300px;
   height:450px;
   position:relative;
   margin-top:30px;
   margin-left:auto;
   margin-right:auto;
}

The problem is the whole column div is a clickable link instead of just the centered image itself.

When I run on JSFiddle, only the image is a clickable link. – BlackHatSamurai Apr 30 '15 at 21:57 — BlackHatSamurai, Apr 30 '15 at 21:57

Patrick W. McMahon · Accepted Answer · 2015-05-01T17:31:10.123

target the <a> tag not the <img> tag. also small note remember to put /> at the end of your <img> tag.

   .banner_column {
       width:25%;
       display:inline-block;
       float:left;
    }

.banner_column a{
    display:inline-block;
    margin:30px auto 60px auto;
    width:300px;
    height:450px;
}

.banner_column img {
    width:100%;
    /*don't worry about height it will auto size*/
}


 <div class="banner_column">
    <a href="#">
        <img src="images/image1.png" alt="Image 1" />
    </a>
    <h1>Check Out Link Above</h1>
    <p>Some text here</p>
</div>

display:block will take up the full width of the parent element every time. if you want it to be inline then use display:inline if you want to have padding and margin and force the element in a block like element to be inline use display:inline-block;.

score 1 · Answer 2 · answered Apr 30 '15 at 22:16

1

Perhaps you may style your a to center instead of image, then you will not have left and right margins that triggers link.

.banner_column a {
   display:block;
   width:300px;
   height:450px;
   position:relative;
   margin:30px auto 0 auto;
}

answered Apr 30 '15 at 22:16

Sergiy T.

1,433
1
23
25

I actually found a solution just now. I kept my original code the same as above but added the following CSS: *.banner_column a {display:block; margin:0 auto; width:300px;}* Found the solution from this [post] http://stackoverflow.com/questions/21617152/why-is-the-margin-space-of-my-image-link-clickable – Jeff P. May 01 '15 at 17:22
1

Ah. Well, glad for you. Go on and make it the answer So this post is closed. :) – Khaldor May 01 '15 at 17:24
You can drop the position:relative; the tag will be relative by default. – Patrick W. McMahon May 07 '15 at 16:06

Khaldor · Answer 3 · 2015-05-01T17:06:37.280

0

Edit : Use Sergiy's solution, add in the style for the a tag.

.banner_column a {
   display:block;
   width:300px;
   height:450px;
   position:relative;
    margin:30px auto 0 auto;
}
.banner_column {
  width: 25%;
  display: inline-block;
  float: left;
  margin-bottom: 60px;
}
.banner_column img {
  display: block;
  width: 300px;
  height: 450px;
  position: relative;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
}

<div class="banner_column">
  <a href="#">
    <img src="image.png" alt="Image 1"/>
  </a>
  <h1>Check Out Link Above</h1>
  <p>Some text here</p>
</div>

https://jsfiddle.net/d3euvpr9/

< Obsolete >

I just tried it and your code works perfectly fine when run on chrome. Do you actually have a fiddle where it fails? Because as BlackHatSamurai commented too, this code works fine. Try closing the img tag maybe?

< /Obsolete >

edited May 01 '15 at 17:06

answered Apr 30 '15 at 22:05

Khaldor

294
1
16

that's not how you're supposed to close an `img` tag... rather ` (in XHTML). In HTML5 this is even considered invalid as img tag among other is a "void element" and shouldn't be closed – Laurent S. Apr 30 '15 at 22:12
My bad. Generally never close them seeing as it doesn't conflict with anything in my experience. But it was the only thing that I could see that might change from the expected output. Updated in my answer – Khaldor Apr 30 '15 at 22:24
@Bartdude while it is true that it's probably better to just not worry about closing it because it's a "void element", you can close an `img` tag either `` or ``. http://stackoverflow.com/a/14860596/756329 – Joseph Hansen Apr 30 '15 at 22:47
@Khaldor I tried playing around with your fiddle and while the image is clickable, the margins around the image are also clickable as well. Let's say you increased the width of and the image is centered using , you'll notice that the margins are also clickable. I'm wondering how I can only have the image clickable and not the margins. – Jeff P. May 01 '15 at 16:53
Use @SergiyT. solution. Works fine to take out the margins. And yes, did not understand that you didn't want the margins and actually thought you had the text showing up as a link. – Khaldor May 01 '15 at 17:04
you don't need position:relative; in the tag. position:relative; is going to be the default. also you don't need to do all that styling on the image. all of the styling on the image you can drop. – Patrick W. McMahon May 07 '15 at 16:04

Gav · Answer 4 · 2018-11-28T17:45:31.850

0

I had a similar problem and fixed it with the following CSS targeted at the problem DIV :

#projects {pointer-events: none;} /* prevents the whole div from containing links */

#projects img {pointer-events: all;} /* restores links on just images within the div  */

edited Nov 28 '18 at 17:45

answered Nov 28 '18 at 17:38

Gav

1
2

score -1 · Answer 5 · answered Apr 30 '15 at 21:58

-1

 <img href="your href id" src="images/image1.png" alt="Image 1" > and remove the img in <a>

answered Apr 30 '15 at 21:58

Tremmillicious

454
4
14

2

Although the code is appreciated, it should always have an accompanying explanation. This doesn't have to be long but it is expected. – peterh May 01 '15 at 01:52

Only make a centered image a link instead of the whole parent div

5 Answers5