如何获得类似于下面提到的图像悬停效果

Question

我在这里写了代码https://codepen.io/smarty_tech/pen/dXEjXbb我想要的是网站http://mahno.com.ua/en/architecture。 试图实现这一点，但我所能做的就是上面所说的。代码完全是CSS和HTML。          

    <div>  
        <div>
            <h1 class="title">Architecture</h1>
        </div>
    <!--section-title end-->

        <div>
            <div>
                <span class="tim">Kube house</span>
                <a href="#">
                    <img src="http://placehold.it/250x250">  
                </a>
                <span class="tim">Kube house</span>
                    <a href="#">
                        <img src="http://placehold.it/250x250">
                    </a>
                </div>
                <div>
                    <span class="tim">Kube house</span>
                    <a href="#">
                        <img src="http://placehold.it/250x250">
                    </a>
                    <span class="tim">Kube house</span>
                    <a href="#">
                        <img src="http://placehold.it/250x250">
                    </a>
                </div>
                <div>
                    <span class="tim">Kube house</span>
                    <a href="#">
                        <img src="http://placehold.it/250x250">
                    </a>
                    <span class="tim">Kube house</span>
                    <a href="#">
                        <img src="http://placehold.it/250x250">
                    </a>

                </div>
                <div>
                    <span class="tim">Kube house</span>
                    <a href="#">
                        <img src="http://placehold.it/250x250">
                    </a>
                    <span class="tim">Kube house</span>
                    <a href="#">
                        <img src="http://placehold.it/250x250">  
                    </a>
                    <span class="tim">Kube house</span>
                    <a href="#">
                        <img src="http://placehold.it/250x250">
                    </a>
                </div>
                <div>
                    <span class="tim">Kube house</span>
                    <a href="#">
                        <img src="http://placehold.it/250x250">
                    </a>
                    <span class="tim">Kube house</span>
                    <a href="#">
                        <img src="http://placehold.it/250x250">
                    </a>
                    <span class="tim">Kube house</span>
                    <a href="#">
                        <img src="http://placehold.it/250x250">
                    </a>
                </div>
            <div>    
        </div>

    </div>        <!--product-list end-->
</div>

编辑：我通过inspect元素检查了网站，找到了用于动画的四个div，但问题是如果我使用div，那么所有的图像都是垂直对齐的但是我想要他们成对的2和3.我已经尝试了很多方法，但不能实现正确的效果。