Эффект зумирования

<!--Эффект зумирования-->
<!--https://mt-webdesign.ru/flipping-->
<script>
// Вешаем атрибуты на контейнеры
$('.repetition_1 .tn-atom').attr('id','img_out_1');
// 1 изображение
$('<div class="img_1"></div>').appendTo('.repetition_1');
$('<div class="img_2"></div>').appendTo('.repetition_1');
$('<div class="img_3"></div>').appendTo('.repetition_1');
$('<div class="img_4"></div>').appendTo('.repetition_1');
$('<div class="img_5"></div>').appendTo('.repetition_1');
// Вешаем атрибуты на изображения
$('.img_1, .img_2, .img_3, .img_4, .img_5').attr('id','img_wrapper_1');
</script>
<style>
/*Свойства для изображений из контейнеров*/
.img_1, .img_2, .img_3, .img_4, .img_5 {
border-radius: 1000px;
width: 100%;
height: 100%;
display: block;
left: 0;
position: absolute;
background-size: cover !important;
display: block;
background-position: center;
}
</style>
<script>
(function() {
// Дублируем фоновое изображение из контейнера в 1 группу блоков
var repetition_1 = document.querySelectorAll("#img_wrapper_1");
$(repetition_1).css('backgroundImage',$('#img_out_1').css('backgroundImage'));
})();
</script>
<script>
// Добавляем тригер на анимацию к 1 контейнеру
$("body").on("mouseover mouseout", '.repetition-trigger-1', function(){
$('.img_1').toggleClass("img_1_animation");
$('.img_2').toggleClass("img_2_animation");
$('.img_3').toggleClass("img_3_animation");
$('.img_4').toggleClass("img_4_animation");
$('.img_5').toggleClass("img_5_animation");
// Анимация основного 1 контейнера
$('#img_out_1').toggleClass("block_2_animation");
});
</script>
<style>
/*Анимация основных контейнеров*/
.repetition_1 .tn-atom {
background-size: 100%;
transform: scale(1.7);
transition-duration: 1.2s;
transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
}
/*Анимация основных контейнеров*/
.block_2_animation {
transform: scale(1) !important;
transition-duration:1.2s;
transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
}
/*Анимация 1 изображения в контейнере*/
.img_1 {
transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
transform: scale(1);
transition-duration:0.4s;
}
/*Анимация 1 изображения в контейнере*/
.img_1_animation {
transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
transform: scale(0);
transition-duration: 1.2s;
}
/*Анимация 2 изображения в контейнере*/
.img_2 {
transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
transform: scale(1);
transition-duration: 0.6s;
}
/*Анимация 2 изображения в контейнере*/
.img_2_animation {
transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
transform: scale(0);
transition-duration: 1s;
}
/*Анимация 3 изображения в контейнере*/
.img_3 {
transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985);
transform: scale(1);
transition-duration: 0.8s;
}
/*Анимация 3 изображения в контейнере*/
.img_3_animation {
transform: scale(0);
transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
transition-duration: 0.8s;
}
/*Анимация 4 изображения в контейнере*/
.img_4 {
transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
transform: scale(1);
transition-duration: 1s;
}
/*Анимация 4 изображения в контейнере*/
.img_4_animation {
transform: scale(0);
transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
transition-duration: 0.6s;
}
/*Анимация 5 изображения в контейнере*/
.img_5 {
transform: scale(1);
transition-duration: 1.2s;
transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
}
/*Анимация 5 изображения в контейнере*/
.img_5_animation {
transform: scale(0);
transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
transition-duration: 0.4s;
}
/*Основные свойства для контейнеров*/
.repetition_1 {
overflow: hidden;
border-radius: 1000px;
}
</style>