.fader190 {
        /* Giving equal sizes to each element */
        width:    190px;
        height:   190px;
        
        /* 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; }
    
    
        .fader190 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; }
    
            .fader190 img:hover {
                /* Making images appear bigger and transparent on mouseover */
                opacity: 0.5;
                width:   120%;
                height:  120%; }
    
        .fader190 .text {
            /* Placing text behind images */
            z-index: -10;     
        
            /* Positioning text top-left conrner in the middle of elements */
            position: absolute;
            top:      50%;
            left:     50%; }
        
            .fader190 .text p {
                /* Positioning text contents 50% left and top relative
                   to text container's top left corner */
                margin-top:  -50%; 
                margin-left: -50%; }







    .fader100 {
        /* Giving equal sizes to each element */
        width:    75px;
        height:   75px;
        
        /* 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; }
    
    
        .fader100 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; }
    
            .fader100 img:hover {
                /* Making images appear bigger and transparent on mouseover */
                opacity: 0.5;
                width:   120%;
                height:  120%; }
    
        .fader100 .text {
            /* Placing text behind images */
            z-index: -10;     
        
            /* Positioning text top-left conrner in the middle of elements */
            position: absolute;
            top:      50%;
            left:     50%; }
        
            .fader100 .text p {
                /* Positioning text contents 50% left and top relative
                   to text container's top left corner */
                margin-top:  -50%; 
                margin-left: -50%; }

.fader300 {
        /* Giving equal sizes to each element */
        width:    280px;
        height:   230px;
        
        /* 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; }
    
    
        .fader300 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; }
    
            .fader300 img:hover {
                /* Making images appear bigger and transparent on mouseover */
                opacity: 0.5;
                width:   120%;
                height:  120%; }
    
        .fader300 .text {
            /* Placing text behind images */
            z-index: -10;     
        
            /* Positioning text top-left conrner in the middle of elements */
            position: absolute;
            top:      50%;
            left:     50%; }
        
            .fader300 .text p {
                /* Positioning text contents 50% left and top relative
                   to text container's top left corner */
                margin-top:  -50%; 
                margin-left: -50%; }

.fader200x240 {
        /* Giving equal sizes to each element */
        width:    200px;
        height:   240px;
        
        /* 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; }
    
    
        .fader200x240 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; }
    
            .fader200x240 img:hover {
                /* Making images appear bigger and transparent on mouseover */
                opacity: 0.5;
                width:   120%;
                height:  120%; }
    
        .fader200x240 .text {
            /* Placing text behind images */
            z-index: -10;     
        
            /* Positioning text top-left conrner in the middle of elements */
            position: absolute;
            top:      50%;
            left:     50%; }
        
            .fader200x240 .text p {
                /* Positioning text contents 50% left and top relative
                   to text container's top left corner */
                margin-top:  -50%; 
                margin-left: -50%; }

.fader150 {
        /* Giving equal sizes to each element */
        width:    150px;
        height:   150px;
        
        /* 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; }
    
    
        .fader150 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; }
    
            .fader150 img:hover {
                /* Making images appear bigger and transparent on mouseover */
                opacity: 0.5;
                width:   120%;
                height:  120%; }
    
        .fader150 .text {
            /* Placing text behind images */
            z-index: -10;     
        
            /* Positioning text top-left conrner in the middle of elements */
            position: absolute;
            top:      50%;
            left:     50%; }
        
            .fader150 .text p {
                /* Positioning text contents 50% left and top relative
                   to text container's top left corner */
                margin-top:  -50%; 
                margin-left: -50%; }