add border with padding to active/non active class - html

Question

I'm trying to achieve the following :
I have image and I need border 1px black and 1px white on the img to achieve some effects . And on hover 3px border that on click become active class and change the hover to fixed border of 3px.
What is the best way to that ?
I tried to do that with padding 3px on the a link
And gave the following :
a {
float:left;
background-color:white;
padding:3px;
}
and
img {
max-width:100%;
float:left;
}
The problem is that the border is not equal and little bit move the img.
Also When I hover all the UI I need opacity 0.5 and it's make problem with the a
So I looking for the best solution for 3 borders with hover and active/non active without affecting the img
my code is :
<ul>
<li>
<div>
<a class="active">
<img>
</a>
</div>
</li>
<li>
<div>
<a>
<img>
</a>
</div>
</li>
</ul>

Answer 1

Not sure if this is what you had in mind, but I hope that the output below can help you get started.
The main trick here is to put your <img> inside 3 divs:
the innermost div is your white border
the middle div is your black border
the outermost div is a transparent 1px border
The last one is required so that the image doesn't move--since the border is already there and will not have to be generated when you hover.
So when you hover: the outer div becomes white, the middle div (previously black) becomes white, and the last div is, well, still white. Voila! You have your "3px solid white" border on hover.
in order to toggle an active class that will stick, then you will need javascript. In this case, I just went ahead and used JQuery.
last note: since I eliminated your <a> tag, I just put a cursor:pointer rule on your outermost div so that it will still look like you are hovering on a link. You can just place whatever is your link action in your javascript onclick rule.
Hope this helps!
$('.outer').on('click',function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
body {
background:gray;
}
li {
margin-top:15px;
}
li * {
transition:all ease 0.3s;
}
li:hover {
cursor:pointer;
}
.outer {
border:1px solid transparent;
}
.outer:hover,.outer:hover > .black-border {
border:1px solid white;
}
.outer:hover img {
opacity:0.5;
}
.active {
border:1px solid white;
}
.active > .black-border {
border:1px solid white;
}
img {
max-width:100%;
padding:0;
margin:0;
vertical-align:top;
background-size:cover;
}
.black-border {
border:1px solid black;
}
.white-border {
border:1px solid white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div>
<div class="outer">
<div class="black-border">
<div class="white-border">
<img src="https://cdn.pixabay.com/photo/2014/03/29/09/17/cat-300572_960_720.jpg">
</div>
</div>
</div>
</div>
</li>
<li>
<div>
<div class="outer">
<div class="black-border">
<div class="white-border">
<img src="https://www.petfinder.com/wp-content/uploads/2012/11/155293403-cat-adoption-checklist-632x475-e1354290788940.jpg">
</div>
</div>
</div>
</div>
</li>
</ul>