HTML/CSS Size Link to Image

Question

I'm trying to make a link with an image like this

<a href="http://test.com">
    <img src="image.png" />
</a>

It's showing up fine, but the clickable area of the link is larger than the image (a 50px circle). I would like to only allow the area of the image to be clickable. I tried to do this with the following css, but to no avail:

a {
    max-width: 50px;
    border-radius: 50%;
}

Changing the width and max-width seems to have no effect. What would be the best way to do this?

I'm trying to do this for the circular contact buttons on the bottom of this site .

Answer 1

Two things, the image on your website is not embedded into an anchor as you described. And the link you provide is missing the www. possibly calling a page that cannot respond or does not exist.

Answer 2

a solution:

#contact a { display: inline-block; }

the a tag is taking the entire width of the parent tag as it's been rendering as a block , if you want force it to render only the content of it's child, you can use inline-block .

Answer 3

Make the image as a background to that div shape ( circle ) , you can get circle by css3 radius . The disadvantage of this is that the image will no longer be imbedded as an HTML img . Then It will work just fine , i think

Answer 4

You can give your link a class, such as .social-link, and apply the following code:

.social-link{
  max-width: 50px;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
}