A CodePen by Azik Samarkandiy. Sweet image zoom effects - pure CSS

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>
<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: 25%;
  max-width: 300px;
  min-width: 300px;
  height: 200px;
  float: left;
  display: inline;
  border-left: solid 0 rgba(0, 0, 0, 0);
  z-index: 99999;
  box-sizing: border-box;
  cursor: pointer;
}

.zoom:hover{
  background-size: cover;
  animation: scale .7s;
}

.zoom:active{
  transform: scale(1.5);
  transition: transform .3s linear;
}

@keyframes scale{
  from{border-width: 1%; } 
  to{border-width: 300px; transform: scale(1.5);}
}

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

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

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

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

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

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

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

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