A CodePen by Azik Samarkandiy. Sweet image zoom effects - Using transition, box-sizing: border-box and border-width on hover.

index.html

<div class="zoom"></div>
<div class="zoom"></div>
<div class="zoom"></div>
<div class="zoom"></div>
<div class="zoom"></div>
<div class="zoom"></div>

style.css

body{
  background: #ccc;
  width: 900px;
  margin: 0 auto;
  padding-top: 30px;
  box-sizing: border-box;
}

.zoom{
  width: 300px;
  height: 200px;
  float: left;
  border-left: solid 0 transparent;
  z-index: 99999;
  box-sizing: border-box;
  cursor: pointer;
}

.zoom:hover{
  border-width: 300px;
  transform: scale(1.5);
  transition: .3s linear;
  box-shadow: 0 0 10px #000;
}

.zoom:nth-child(1){
  background: url(//azik.me/wp-content/uploads/2012/11/1_1.png);
}

.zoom:nth-child(2){
  background: url(//azik.me/wp-content/uploads/2012/11/1_2.png);
}

.zoom:nth-child(3){
  background: url(//azik.me/wp-content/uploads/2012/11/1_3.png);
}

.zoom:nth-child(4){
  background: url(//azik.me/wp-content/uploads/2012/11/6_1.png);
}

.zoom:nth-child(5){
  background: url(//azik.me/wp-content/uploads/2012/11/6_2.png);
}
    
.zoom:nth-child(6){
  background: url(//azik.me/wp-content/uploads/2012/11/6_3.png);
}