The grey highlight of a link Image?

HTML & CSS
1

html code

You can’t do that with this code, how come?

You can usually do that with all images, how come not these?

What’s the reason?

css code

.container {
  width: 233px;
  height: 50px;
}

.facebook,
.twitter,
.instagram,
.pinterest {
  width: 50px;
  height: 50px;
  float: left;
  cursor: pointer;
}

.facebook {
  background: url("https://i.imgur.com/Cp7WRET.png") no-repeat;
}

.twitter {
  margin: 0 11px;
  background: url("https://i.imgur.com/MchCG7F.png") no-repeat;
}

.instagram {
  background: url("https://i.imgur.com/3FPoPUy.png") no-repeat;
}

.pinterest {
  margin-left: 11px;
  background: url("https://i.imgur.com/IuKZk48.png") no-repeat;
}


<div class="container">
  <a class="facebook" href="foo.html" target="_blank"></a>
  <a class="twitter" href="foo.html" target="_blank"></a>
  <a class="instagram" href="foo.html" target="_blank"></a>
  <a class="pinterest" href="foo.html" target="_blank"></a>
</div>
2

I think I may know why now, because the image url is in the CSS and not the HTML part.

3

Do what exactly?

I don’t know what that first drawing signifies and how it relates to the code you posted. There seems to be no code in the html that would accomplish or attempts to accomplish the picture you are showing?

4

You know when you right click on the screen then drag over an image, you get a grey shadow.

That’s because the url is in the html, not the css.

If it was in the css you wouldfn’t be able to do that.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.