| 
		
			Сообщение от Aleksanderj
			
		
	 | 
	
		Это обычный и не красивый переход. Нужно плавное увеличение и первый плавно исчезает. 
Если брать по отдельности, есть плавный переход
	 | 
	
.img {
   background:url('первое_изображение.jpg');
   height: 300px;
   transition: all 0.5s;
   width: 300px;
}
.img:hover {
   background:url('второе_изображение.jpg');
   height: 500px;
   margin: -100px 0% 0% -100px;
   position: absolute;
   width: 500px;
}
<div class="img"></div>