JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<a href="/service/architecture-design/" title="Проектируем">
    <figure class="preview">
        <img src="//www.fingus.ru/pict/pict1003/kartinki_987787543333333.jpg" alt="Проектируем">
        </figure>
  
    </a>

CSS

body{
    background: #F5F5F5;
}
img {
    max-width: 248px;
    max-height: 148px;
    position: absolute;
    top: 0;
}
.preview {
    position: relative;
    overflow: hidden;
    width: 148px;
}
.preview:before {
    content: '';
    display: block;
    position: relative;
    z-index: 9;
    width: 148px;
    height: 148px;
    background: url('//storage4.static.itmages.ru/i/15/0715/h_1436951616_2574814_37ace56d8c.png');
}

a:hover .preview:before{
    background: url("//storage2.static.itmages.ru/i/15/0715/h_1436951847_9437560_dc7cb12638.png");
}