Image <a> link css

by klode

HTML

<div class="main-container">


  <div class="buttons-container">
    <a class="icon-link" title="Click Me">
      <img src="http://www.licpartnership.org/sites/licpartnership.org/files/resize/Instagram_Icon_Small-40x40.png" alt="activeicon"> <span> Some text</span></span>
    </a>
    <a class="icon-link" title="Click Me">
      <img src="http://www.licpartnership.org/sites/licpartnership.org/files/resize/Instagram_Icon_Small-40x40.png" alt="activeicon">
    </a>
  </div>
</div>

CSS

.main-container {
  border: 1px black solid;
  position:relative;
  height:600px;
}
a.icon-link img {border: 1px blue solid; margin: 0;}
.buttons-container {
  border: 1px red solid;
  position: absolute;
  right: 0;
  top: 0;
}
a.icon-link span {
  border: 1px blue solid;
  display: inline-block;
}
a.icon-link {
  border: 2px green solid;
  display: inline-block;
  cursor: pointer;
  }
  a.icon-link:hover,
  a.icon-link:focus {
    text-decoration: none;
  }
}