JSFiddle - React, Tailwind, and code Playground

Div hover overlaid on divs

by eggleton

HTML

<ul>
    <li>
        <div class="image">
            <img src="http://i.stack.imgur.com/rOVDt.jpg" />
        </div>
        <div class="overlay">
            <div class="bt1"></div>
            <div class="bt2"></div>
        </div>
    </li>
    <li>
        <div class="image">
            <img src="http://i.stack.imgur.com/rOVDt.jpg" />
        </div>
        <div class="overlay">
            <div class="bt1"></div>
            <div class="bt2"></div>
        </div>
    </li>
    <li>
        <div class="image">
            <img src="http://i.stack.imgur.com/rOVDt.jpg" />
        </div>
        <div class="overlay">
            <div class="bt1"></div>
            <div class="bt2"></div>
        </div>
    </li>
    <li>
        <div class="image">
            <img src="http://i.stack.imgur.com/rOVDt.jpg" />
        </div>
        <div class="overlay" style="text-align: center;">
            <div class="bt1"></div>
            <div class="bt2"></div>
        </div>
    </li>
</ul>

CSS

.image {
    width:100px;
    height:100px;
}
.overlay {
    width:100%;
    height:100%;
    display:none;
    position:absolute;
    top:0px;
    left:0px;
    text-align: center;
}
.overlay div {
    position:relative;
    display:inline-block;
    top:50%;
    margin:-50% 5px 0 5px;
}
ul {
    list-style: none;
    width: 100%;
}
ul li {
    position:relative;
    display:inline-block;
    width:150px;
    height:150px;
}
li:hover .overlay {
    display:block;
    background-color:black;
    opacity:0.75;
}
.bt1 {
    background-color:orange;
    width:50px;
    height:50px;
}
.bt2 {
    background-color:green;
    width:50px;
    height:50px;
}