JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="hits-list">
    <li class="list-item">
      <a href="#" class="hit">
      <img src="https://htmlacademy-htmlcss.github.io/477857-gllacy/7/img/icecream-2.png" alt="">
      <p class="hit-title">Сливочно-кофейное <br>с кусочками шоколада</p>
      <p class="btn">Быстрый просмотр</p>
        </a></li>
    <li class="list-item"><a href="#" class="hit">
            <img src="https://htmlacademy-htmlcss.github.io/477857-gllacy/7/img/icecream-2.png" alt="">
            <p class="hit-title">vfsdvdf vdsfvfdv vdfv Сливочно-кофейное с кусочками шоколада</p>
            <p class="btn">Быстрый просмотр</p>
        </a></li>
<li class="list-item"><a href="#" class="hit">
            <img src="https://htmlacademy-htmlcss.github.io/477857-gllacy/7/img/icecream-2.png" alt="">
            <p class="hit-title">Сливочно-кофейное с кусочками шоколада</p>
            <p class="btn">Быстрый просмотр</p>
        </a></li>
</ul>

CSS

*{
    box-sizing: border-box;
}

body{
    background: #ccc;
}

img{
    max-width: 100%;
}

.hits-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.list-item{
    width: 268px;
    position: relative;
    margin-bottom: 30px;
}

.hit{
    text-align: center;
    text-decoration: none;
    display: block;
    padding: 10px;
}

.hit:hover{
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 10px #000;
    position:absolute;
    z-index:2;
}

.hit:hover .btn{
    display: inline-block;
}


.hit::before{
    /* это лейба ХИТ */
}

.hit-title{
    background: linear-gradient(to top, #333 1px, transparent 1px);
    display: inline;
}

.btn{
    color: #ffffff;
    background-image: linear-gradient(to top, #e84c36, #f26743);
    border-radius: 25px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    border: none;
    box-shadow: 0 2px 0 0 #9e4334;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    vertical-align: middle;
    text-decoration: none;
    display: none;
}