Fenrir Fenrir - 1 month ago 6
HTML Question

When I click on the image I put a filter on it which effects the border of the image aswell, how can i make the border resistent to that?

Here is the code:



.championlock:active {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

.championlock:hover {
border: 5px solid #93d3fe;
border-radius: 5px;
}

.championlock {
border: none;
overflow: hidden;
-webkit-transition-duration: 0.05s;
-moz-transition-duration: 0.05s;
-o-transition-duration: 0.05s;
-ms-transition-duration: 0.05s;
transition-duration: 0.05s;
}

<a href="trundlesupportguide.html" target="_blank"><img class="championlock" src="http://www.counter-lol.de/Trundle.png" alt="Trundle Icon" width="100%" style="max-width:62px;"></a>





I want the border to stay blue, how can I do that?

http://jsfiddle.net/ow4pgyzk/

Answer

Just set the border to the a tag (the parent).

a {
  display:inline-block;
}

a:hover {
  border: 5px solid #93d3fe;
	border-radius: 5px;
}

a img {
  display:block;
}

.championlock:active {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.championlock{
  border: none; 
  -webkit-transition-duration: 0.05s;
  -moz-transition-duration: 0.05s;
  -o-transition-duration: 0.05s;
  -ms-transition-duration: 0.05s;
  transition-duration: 0.05s;
}
<a href="trundlesupportguide.html" target="_blank">
  <img class="championlock" src="http://www.counter-lol.de/Trundle.png" alt="Trundle Icon" width="100%" style="max-width:62px;">
</a>

Comments