efeito zoom (hover) saindo fora da div

olá, estou tendo um problema, quando passo o mouse em cima da imagem ele faz o efeito zoom, porém a imagem sai fora da div o que não era para acontecer.

<article class="article">
 <div class="title-article container-fluid">
 <h1 style="text-align:center"> Title </h1>
 </div>
 <div class="rows">
 <div class="col-md-4">
 <a href="img/img1.jpg"><img src="img/img1.jpg" alt="">
 <div class="retina">
 <h1>Texto Imagem</h1>
 </div>
 </a>
 </div>
 </div>
 </article>

	 

.article {
 grid-area: article;
 background: #333333;
 overflow: hidden;
 padding: 0 50px 0 50px;
}

.title-article {
 background: #fdbb30;
}

.col-md-4 {
 padding: 0;
 margin: 5px 0 5px 0;
}

.article .col-md-4 img {

 width: 100%;
 height: 100%;
	-webkit-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
 -moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
 -ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
 -o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
 transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
}

.article .col-md-4:hover img {

 -webkit-transform: scale(1.05);
 -moz-transform: scale(1.05);
 -ms-transform: scale(1.05);
 -o-transform: scale(1.05);
 transform: scale(1.05);
}

.article .col-md-4 .retina {

 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 opacity: 0;
 background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
 border-radius: 2px;
 text-align: center;
 padding: 30px;

 -webkit-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
 -moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
 -ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
 -o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
 transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
}

.article .col-md-4:hover .retina {

 opacity: 1;
 box-shadow: inset 0 0 100px 50px rgba(0,0,0,.5);
}

.article .retina h1 {

 color: #fff;
}