on hover image border width bigger then same other column border width

Question

I want this like the image in responsive layout

I have tried but it is not working as when I increase the border of one element, the increased size affects the following images and the grid layout is not as per design any more.

.list_item{
  margin: 0px 0px;
  padding: 0px 0px;
  list-style: none;
}

.list_item li{
  margin-bottom: 10px;
  padding-left: 14px;
  padding-right: 14px;
}

.list_item li{
  float: left;
  margin-bottom: 20px;
  margin-top: 7px;
  padding-left: 20px;
  padding-right: 20px;
  width: 33.3333%;
}
.list_item > li img {
height: 137px;
width: 259px;
}
.list_item li:hover .list_img{
  border: 5px solid red;
  height: 147px;
  width: 269px;
}

.list_item > li .list_img{
  border: 3px solid red;
  height: 143px;
  width: 265px;
background:blue;
}

<ul class="list_item">
  <li>
    <div class="list_img">
      <img src="images/1.jpg">
    </div>
  </li>
  <li class="list_select">
    <div class="list_img">
      <img src="images/2.jpg">
    </div>
  </li>
  <li>
    <div class="list_img">
      <img src="images/2.jpg">
    </div>
  </li>
</ul>

Answer 1

use box-sizing: border-box; on elements that might have a border but you want to be calculated it as part of their width, not added to it

http://www.paulirish.com/2012/box-sizing-border-box-ftw/ (old but gold)

.list_item > li .list_img {
    box-sizing: border-box;
    border: 3px solid #707070;
    height: 143px;
    width: 265px;
}