JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page-wrapper">
            <div class="row">
                <h1 class="page-header center">flexbox hover cover effect</h1>
                <h4 class="center">I want black block cover my blue block</h4>
                <!-- main Content -->
                <div class="row col-md-offset-1 col-md-10">
                    <div class="col-md-4 view small_img"><div class="blue"></div></div>
                    <div class="col-md-4 view small_img"><div class="blue"></div></div>
                    <div class="col-md-4 view small_img"><div class="blue" ></div></div>
                </div>
            </div>
        </div>

CSS

.small_img {
        position: relative;
        overflow: hidden;

        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .small_img:hover:before,
    .small_img:hover:after {
        content: '';
        position: absolute;
    }
    
    .small_img:hover:before {
        content: 'view';
        border: 2px solid hsl(0, 0%, 100%);
        border-radius: 10px;
        line-height: 2em;
        padding: 5px;
        color: white;
        z-index: 5;
        /* top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); */
    }
    
    .small_img:hover:after {
        
        width: 92.5%;
        height: 92.5%;
        background: hsla(0, 0%, 0%, 0.85);
        /* top: 0;
        left: 0; */
    }
    
    .small_img img {
        height: 100%;
    }
    
    .blue{
      background: hsl(220, 100%, 60%);
      width: 300px;
      height: 300px;
      border: 1px solid black;
    }