JSFiddle - React, Tailwind, and code Playground

HTML

<div class='holder'>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/><img src="http://placekitten.com/g/50/50"/><img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/><img src="http://placekitten.com/g/50/50"/><img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/><img src="http://placekitten.com/g/50/50"/><img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/><img src="http://placekitten.com/g/50/50"/><img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
    <img src="http://placekitten.com/g/50/50"/>
...

CSS

img {

    float: left;
    margin: 2px;
    position: relative;
    -webkit-transition: -webkit-transform .15s linear;
}

.hovered {
    -webkit-transform: scale(1.7);
    z-index: 11;
}

.hovered_small {

    -webkit-transform: scale(1.3);
    z-index: 10;
}

JavaScript

var columns, rows;
//считаем колонки и столбцы
setTimeout(calcsilzes, 1000);
$(window).resize(calcsilzes);

function calc(hovered){
    //- взять индекс текущей
    var index = hovered.index();
  
    var current_x = Math.floor(index / columns);
    var current_y = Math.floor(index % columns);
   
    var depth = 1;
    //- зная индекс и всякие размеры - вычислить индекс ее окружения.
    for (var i = 0; i < rows; i++){
        for (var k = 0; k < columns; k++){
             var ind = i*(columns) + k;
            if (i >= current_x - depth && i <= current_x+ depth && k >= current_y - depth && k <= current_y + depth && ind != index){

                //а) если нужно так как в гифке - то просто текущей сделать большой scale, а остальным поменьше.
                $('img:eq(' +ind +')').addClass('hovered_small');
            }
        }
    }
        
}

function calcsilzes(){
    columns = calculateLIsInRow();
    //кол-во строк методом "мы уже знаем столбцы"
    rows = Math.floor($('img').length / columns +1);
}

function calculateLIsInRow() {
    //количество столбцов методом перебора top'a
    var lisInRow = 0;
    $('img').each(function() {
        if($(this).prev().length > 0) {
            if($(this).position().top != $(this).prev().position().top) return false;
            lisInRow++;
        }
        else {
            lisInRow++;   
        }
    });    
    return lisInRow;
}

$('img').on('mouseenter', function(){
    $('.hovered').removeClass('hovered');
    $('.hovered_small').removeClass('hovered_small');    
    $(this).addClass('hovered');    
    calc($(this));
});

$('img').on('mouseleave', function(){
    $('.hovered').removeClass('hovered');
    $('.hovered_small').removeClass('hovered_small');
});