JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="item">
        <img src="" width="100" height="100"/><br/>
        Заголовок
        <input type="submit"/>
    </div>
    <div class="item">
        <img src="" width="100" height="100"/><br/>
        Заголовок
        <input type="submit"/>
    </div>
    <div class="item">
        <img src="" width="100" height="100"/><br/>
        Заголовок
        <input type="submit"/>
    </div>
    <div class="item">
        <img src="" width="100" height="100"/><br/>
        Заголовок
        <input type="submit"/>
    </div>
</div><!-- /wrap -->

CSS

.wrap {
    width:250px;
}
.item {
    position: relative;
    display:inline-block;
    width:100px;
    vertical-align:top;
}
.item input {    
    display:none; 
}
.item:hover {
    background:#ccc;
}
.item:hover input {
    position: absolute;
    bottom: 0;
    /* left: 50%;     */
    display:block;
    margin: auto;
}