JSFiddle - React, Tailwind, and code Playground

HTML

<div id="block-wrapper">
    <div class="block" id="two" onclick="window.location='#modal2';">
        <div class="block-img">
            <img alt=" " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTxhBHi6kbRtxNgNuMA87SsZGDePoiRqmEubmSvE86GAu_1QhJCRJHwEw">
        </div>
    </div>
    <div class="block" id="four" onclick="window.location='#modal4';">
        <div class="block-img">
            <img alt=" " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTxhBHi6kbRtxNgNuMA87SsZGDePoiRqmEubmSvE86GAu_1QhJCRJHwEw">
        </div>
    </div>
</div>

CSS

#block-wrapper {
    width:100%;
    text-align:center;
    margin-top:8%;
    position:relative;
}
.block-img img {
    width:710px;
    margin-bottom:50px;
    position:relative;
}
.block-img img:hover:after {
    opacity: 1;
}
.block-img img:after {
    box-sizing: border-box;
    content:"+";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: black;
    font-size: 2.3rem;
    line-height: 1em;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    opacity: 0;
    -webkit-transition: opacity 100ms ease-out;
    transition: opacity 100ms ease-out;
    color: white;
}