JSFiddle - React, Tailwind, and code Playground

by Alex Str

HTML

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

CSS

.wrap {
    width:250px;
}
.item {
    display:inline-block;
    width:100px;
    vertical-align:top;
    position:relative;
}
.item input {
    display:none;
}
.item:hover {
    background:#ccc;
    z-index: 1;
}
.item:hover input {
    display: inline-block;
    
}

.btn-wrapp {
   background:#ccc;
   position: absolute;
    width: 100%;
    text-align: center;
}