JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div class="imgs">
        <a href="#"><img src="http://yandex.st/morda-logo/i/logo.svg" /></a>
    <span class="price">500 руб.</span>
      </div>

CSS

div{
    position: relative;
    display: inline-block;
}

a{
    position: relative;
    z-index: 1;
}

img{
    border: 1px solid transparent;
}

span{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: #ccc;
}

div:hover img{
    border-color: #ccc;
}

div:hover span{
    background: #222;
    color: #fff;
}