JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    
    <div class="fader">
        <div class="text">
            <p>Yay!</p>
        </div>
        <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
            <img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt="">
            </a>
        </div>
        
        <div class="fader">
            <div class="text">
                <p>Yay!</p>
            </div>
            <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
                <img class ="blog" src="http://s18.postimg.org/4st2fxgqh/image.png" alt="">
                </a>
            </div>
            
            <div class="fader">
                <div class="text">
                    <p>Yay!</p>
                </div>
                <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
                    <img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt="">
                    </a>
                </div>
                
                <div class="fader">
                    <div class="text">
                        <p>Yay!</p>
                    </div>
                    <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
                        <img class ="blog" src="http://s18.postimg.org/5xn4lb37d/image.png" alt="">
                        </a>
                    </div>
                    
                </div>

CSS

#menu {
        text-align: center; }
    
    
    .fader {
        /* Giving equal sizes to each element */
        width:    250px;
        height:   375px;
        
        /* Positioning elements in lines */
        display:  inline-block;
        
        /* This is necessary for position:absolute to work as desired */
        position: relative;
        
        /* Preventing zoomed images to grow outside their elements */
        overflow: hidden; }
    
    
        .fader img {
            /* Stretching the images to fill whole elements */
            width:       100%;
            height:      100%;
        
            /* Preventing blank space below the image */
            line-height: 0;
    
            /* A one-second transition was to disturbing for me */
            -webkit-transition: all 0.3s ease;
            -moz-transition:    all 0.3s ease;
            -o-transition:      all 0.3s ease;
            -ms-transition:     all 0.3s ease;
            transition:         all 0.3s ease; }
    
            .fader img:hover {
                /* Making images appear bigger and transparent on mouseover */
                opacity: 0.5;
                width:   120%;
                height:  120%; }
    
        .fader .text {
            /* Placing text behind images */
            z-index: -10;     
        
            /* Positioning text top-left conrner in the middle of elements */
            position: absolute;
            top:      50%;
            left:     50%; }
        
            .fader .text p {
                /* Positioning text contents 50% left and top relative
                   to text container's top left corner */
                margin-top:  -50%; 
                margin-left: -50%; }