Inline Border

Ein Beispiel für eine transparente Inline Border 
Dieser Rahmen befindet sich inliegend auf einem Bild und kann gleichzeitig verlinkt werden

Inline Border

Gehe mit der Maus über das Bild für einen Hover-Effekt.


Anleitungen findet Ihr auch hier:
Gerhard Kerner's Technikblog 


Hier zur Info meine CSS für die "Inline Border":

.inline-border div {
  position: relative;
  float: left;
}
.inline-border div #border {
  position: absolute;
  border-width: 10px;
  border-style: solid;
  border-color: rgba(135, 135, 255, 0.5);
  border-radius: 20px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  -webkit-transition: border-width 1000ms linear;
  -ms-transition: border-width 1000ms linear;
  transition: border-width 1000ms linear;
}
.inline-border div #border:hover {
  border-width: 15px;
  border-color: rgba(251, 64, 64, 0.5);
  -webkit-transition: border-width 500ms linear;
  -ms-transition: border-width 500ms linear;
  transition: border-width 500ms linear;
}
.inline-border img {
  display: block;
  border-radius: 20px;
}


Hier zur Info meine HTML von dem Bild für die "Inline Border" (hier mit einsetzbarem Linkziel):

<!-- Beginn Inline Border -->
<div class="inline-border"><div><a href="#Linkziel"><div id="border"></div></a><a href="#Linkziel">
    <img src="http://www.mobirise-tutorials.com/LawyerM4-Tutorials/assets/images/vogel.jpg" alt="Bild" title="Vogel">
      </a></div>
</div>
<!-- Ende Inline Border -->