How to transition image when having border applied - html

Question

I have an image inside a container, when I apply border to the container, the image is getting smaller, I want to know how to transition this effect? I want to have the same border applied and instead of quick image small, I want to transition it smoothly
.modal-thumb-item {
margin-bottom: 8.5px;
}
.modal-thumb-item {
border: 2px solid transparent;
}
#media screen and (min-width: 769px) {
.thumb-container .modal-thumb-item {
margin-bottom: 15px;
}
}
.item-thumb {
max-width: 100%;
display: block;
position: relative;
cursor: pointer;
}
.item-thumb:hover {
border: 10px solid rgba(0, 0, 0, 0.800);
border-radius: 10px;
}
.thumb-image-wrap {
max-width: 100%;
width: 100%;
}
.active-image-wrap {
padding: 20px;
border-radius: 12px;
}
<div class="modal-thumb-item">
<div id="modal-product-thumb-item" style="border-radius: 10px; height: 100%; overflow: hidden; background: tomato">
<a class="item-thumb">
<img class="thumb-image-wrap active-image-wrap" src="https://www.w3schools.com/html/pic_trulli.jpg" />
</a>
</div>
</div>

Answer 1

You need to add a transition property to your element that gets hovered over.
For example:
.item-thumb {
max-width: 100%;
display: block;
position: relative;
cursor: pointer;
transition: 0.3s; // Add this here
}
.modal-thumb-item {
margin-bottom: 8.5px;
}
.modal-thumb-item {
border: 2px solid transparent;
}
#media screen and (min-width: 769px) {
.thumb-container .modal-thumb-item {
margin-bottom: 15px;
}
}
.item-thumb {
max-width: 100%;
display: block;
position: relative;
cursor: pointer;
transition: 0.3s;
}
.item-thumb:hover {
border: 10px solid rgba(0, 0, 0, 0.800);
border-radius: 10px;
}
.thumb-image-wrap {
max-width: 100%;
width: 100%;
}
.active-image-wrap {
padding: 20px;
border-radius: 12px;
}
<div class="modal-thumb-item">
<div id="modal-product-thumb-item" style="border-radius: 10px; height: 100%; overflow: hidden; background: tomato">
<a class="item-thumb">
<img class="thumb-image-wrap active-image-wrap" src="https://www.w3schools.com/html/pic_trulli.jpg" />
</a>
</div>
</div>
Read more about possible values for the CSS Transition property here