How to transition image when having border applied

user_17395714 0
Viewed 35

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>

css html
1 Answers

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

user_21115150
Related