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


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

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