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

.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:   105%;
                height:  105%; }
    
        .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%; }

.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:   110%;
                height:  110%; }
    
        .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%; }


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

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

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

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

.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%; }