CodePen

HTML

            
              <div id="container" class="js-masonry">
                
                    <div class="masonryitem h2 clickable mastall">
                      <img src="http://lorempixel.com/385/255/abstract/1" id="imgbw"/>
                      <img src="http://lorempixel.com/385/255/abstract/2" id="imgcolor"/>
                      <img src="http://lorempixel.com/385/255/abstract/3" id="imgblur"/>
                        <div class="masonryheader"><h4>Test Title</h4></div>
                        <p>Lorem ipsum dolor sit, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>
                    </div>
                    
                    <div class="masonryitem w2 clickable maswide">
                      <img src="http://lorempixel.com/385/255/abstract/2" id="imgbw"/>
                      <img src="http://lorempixel.com/385/255/abstract/3" id="imgcolor"/>
                      <img src="http://lorempixel.com/385/255/abstract/4" id="imgblur"/>
                        <div class="masonryheader"><h4>Test Title</h4></div>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>
                    </div>
                    
                    <div class="masonryitem w2 clickable maswide">
                      <img src="http://lorempixel.com/385/255/abstract/3" id="imgbw"/>
                      <img src="http://lorempixel.com/385/255/abstract/4" id="imgcolor"/>
                      <img src="http://lorempixel.com/385/255/abstract/5" id="imgblur"/>
                        <div class="masonryheader"><h4>This Is a Test Title</h4></div>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>
                    </div>
                    
                    <div class="masonryitem clickable mastall">
                        <img src="http://lorempixel.com/385/255/abstract/4" id="imgbw"/>
                      <img src="http://lorempixel.com/385/255/abstract/5" id="imgcolor"/>
                      <img src="http://lorempixel.com/385/255/abstract/6" id="imgblur"/>
                        <div class="masonryheader"><h4>Test Title</h4></div>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>
                    </div>
                    
                    <div class="masonryitem h2 clickable mastall">
                        <img src="http://lorempixel.com/385/255/abstract/5" id="imgbw"/>
                      <img src="http://lorempixel.com/385/255/abstract/6" id="imgcolor"/>
                      <img src="http://lorempixel.com/385/255/abstract/7" id="imgblur"/>
                        <div class="masonryheader"><h4>Test Title</h4></div>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>
                    </div>
                    
                    <div class="masonryitem w2 clickable maswide">
                        <img src="http://lorempixel.com/385/255/abstract/6" id="imgbw"/>
                      <img src="http://lorempixel.com/385/255/abstract/7" id="imgcolor"/>
                      <img src="http://lorempixel.com/385/255/abstract/8" id="imgblur"/>
                        <div class="masonryheader"><h4>TestTitle</h4></div>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>
                    </div>
                    
                    <div class="masonryitem h2 clickable mastall">
                        <img src="http://lorempixel.com/385/255/abstract/7" id="imgbw"/>
                      <img src="http://lorempixel.com/385/255/abstract/8" id="imgcolor"/>
                      <img src="http://lorempixel.com/385/255/abstract/9" id="imgblur"/>
                        <div class="masonryheader"><h4>Test Title</h4></div>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>
                    </div>
                    
                    <div class="masonryitem h2 clickable mastall">
                        <img src="http://lorempixel.com/385/255/abstract/8" id="imgbw"/>
                      <img src="http://lorempixel.com/385/255/abstract/9" id="imgcolor"/>
                      <img src="http://lorempixel.com/385/255/abstract/10" id="imgblur"/>
                        <div class="masonryheader"><h4>Test Title</h4></div>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore sit amet consectetuer.</p>
                    </div>
                    
                    <div class="masonryitem clickable maswide">
                        <img src="http://lorempixel.com/385/255/abstract/9" id="imgbw"/>
                      <img src="http://lorempixel.com/385/255/abstract/10" id="imgcolor"/>
                      <img src="http://lorempixel.com/385/255/abstract/11" id="imgblur"/>
                        <div class="masonryheader"><h4>This right here is a test title wow</h4></div>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>
                    </div>
                    
                    <div class="masonryitem h2 clickable mastall">
                        <img src="http://lorempixel.com/385/255/abstract/10" id="imgbw"/>
                      <img src="http://lorempixel.com/385/255/abstract/11" id="imgcolor"/>
                      <img src="http://lorempixel.com/385/255/abstract/12" id="imgblur"/>
                        <div class="masonryheader"><h4>Test Title</h4></div>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>
                    </div>
                    
                    <div class="masonryitem clickable maswide">
                        <img src="http://lorempixel.com/385/255/abstract/11" id="imgbw"/>
                      <img src="http://lorempixel.com/385/255/abstract/12" id="imgcolor"/>
                      <img src="http://lorempixel.com/385/255/abstract/13" id="imgblur"/>
                        <div class="masonryheader"><h4>Test Title</h4></div>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.<a href="#">>></a></p>
                    </div>
                    
                </div>
            
          
!

CSS

            
              @charset "UTF-8";
/* CSS Document */

/** {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}*/

.masonryitem {
	display:inline-block;
	width: 120px;
	height: 120px;
	background-color:#333;
	margin: 5px;
	border-radius:3px;
	overflow:hidden;
	/*border radius fix*/
	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

.masonryitem.clickable {
	cursor:pointer;
}

.masonryitem img {
	display:block;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
	position:absolute;
	top:0;
	left:0;
	overflow:hidden;
}

.masonryheader {
	position:absolute;
	top:0px;
	left:0px;
	height:90px;
}

.masonryitem h4 {
	position:absolute;
	bottom:0;
	/*top:60px;*/
	/*left:15px;*/
	margin-left:15px;
	margin-bottom:5px;
	z-index:5;
	/*vertical-align:text-bottom;*/
	width: 210px;
	opacity:0;
	/*text-align:left;*/
	font-family: 'Raleway', sans-serif;
	font-weight:100;
 	text-transform: uppercase;
	font-size:1.5em;
	text-shadow: 4px 4px 8px #000000;
	text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6);
	-webkit-transition: all .7s ease;
	-moz-transition: all .7s ease;
	-o-transition: all .7s ease;
	transition: all .7s ease;
}

.masonryitem p {
	position:absolute;
	top:90px;
	left:-5px;
	z-index:5;
	color: #fff;
	text-shadow: 4px 4px 8px #000000;
	text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6);
	text-align:left;
	background-color:rgba(50, 50, 50, 0.6);
	/*height:120px;*/
	padding-left:20px;
	padding-right:20px;
	padding-top:7px;
	padding-bottom:7px;
	/*margin-right:-60px;*/
	overflow:hidden;
	text-overflow:ellipsis;
	opacity:0;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

.masonryitem.w1 {
	width: 100px;
}

.masonryitem.w2 {
	width: 250px;
}

.masonryitem.w3 {
	width: 360px;
}



.masonryitem.h1 {
	height: 100px;
}

.masonryitem.h2 {
	height: 230px;
}

.masonryitem.h3 {
	height: 360px;
}



#imgbw {
	opacity:1;
	filter:alpha(opacity=100);
	z-index:1;
}
	
#imgcolor {
	opacity:0;
	filter:alpha(opacity=0);
	z-index:2;
}

#imgblur {
	opacity:0;
	filter:alpha(opacity=0);
	z-index:3;
}

.masonryitem:hover #imgcolor {
	opacity:1;
	filter:alpha(opacity=100);
}

.mastallexpand #imgblur {
	opacity:1;
	filter:alpha(opacity=100);
}

.maswideexpand #imgblur {
	opacity:1;
	filter:alpha(opacity=100);
}

.mastallexpand h4 {
	opacity:1;
	filter:alpha(opacity=100);
	width: 230px;
}

.maswideexpand h4 {
	opacity:1;
	filter:alpha(opacity=100);
	width: 360px;
}

.maswide h4 {
	width:360px;
}

.maswide p {
	width:350px;
}

.masonryitem.maswideexpand p {
	opacity:1;
	filter:alpha(opacity=100);
	width: 350px;
}

.masonryitem.maswideexpand {
	height: 230px;
	width: 360px;
}

.mastall h4 {
	width:230px;
}

.mastall p {
	width:230px;
}

.masonryitem.mastallexpand p {
	opacity:1;
	filter:alpha(opacity=100);
	width: 230px;
}

.masonryitem.mastallexpand {
	height: 230px;
	width: 230px;
}

#container {
  width: 650px;
}

@media screen and (max-width: 650px) {
  
  #container {
    width: 500px;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              //http://masonry.desandro.com/masonry.pkgd.js added as external resource
//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js added as external resource
//https://github.com/desandro/classie/blob/master/classie.js added as external resource

docReady( function() {

  var container = document.querySelector('.js-masonry');
  var msnry = new Masonry( container, {
        columnWidth: 120, 
        gutter: 10, 
        itemSelector: '.masonryitem'
	  });

  eventie.bind( container, 'click', function( event ) {
    // don't proceed if item was not clicked on
    //if ( !has( event.target, '.clickable a' ) ) {
      //return;
    //}
    // change size of item via class
    //classie.toggle( event.target, 'bigger' );
    // trigger layout
    msnry.layout();
  });

});

;(function($){

    $(document).ready(function(){

        $(".mastall img").click(function(){

            var parent = $(this).parent();            
            parent.toggleClass('mastallexpand'); msnry.layout();

            var cls = parent.attr('class');
            console.log('class: ' + cls);           

        });
		
		$(".mastall h4").click(function(){

            var parent = $(this).parentNode.parentNode();            
            parent.toggleClass('mastallexpand'); msnry.layout();

            var cls = parent.attr('class');
            console.log('class: ' + cls);           

        });
		
		$(".mastall p").click(function(){

            var parent = $(this).parent();            
            parent.toggleClass('mastallexpand'); msnry.layout();  

            var cls = parent.attr('class');
            console.log('class: ' + cls);         

        });
		
		$(".mastall .masonryheader").click(function(){

            var parent = $(this).parent();            
            parent.toggleClass('mastallexpand'); msnry.layout();  

            var cls = parent.attr('class');
            console.log('class: ' + cls);         

        });
		
		
		
		$(".maswide img").click(function(){

            var parent = $(this).parent();            
            parent.toggleClass('maswideexpand'); msnry.layout();

            var cls = parent.attr('class');
            console.log('class: ' + cls);           

        });
		
		$(".maswide h4").click(function(){

            var parent = $(this).parentNode.parentNode();            
            parent.toggleClass('maswideexpand'); msnry.layout();

            var cls = parent.attr('class');
            console.log('class: ' + cls);           

        });
		
		$(".maswide p").click(function(){

            var parent = $(this).parent();            
            parent.toggleClass('maswideexpand'); msnry.layout();  

            var cls = parent.attr('class');
            console.log('class: ' + cls);         

        });
		
		$(".maswide .masonryheader").click(function(){

            var parent = $(this).parent();            
            parent.toggleClass('maswideexpand'); msnry.layout();  

            var cls = parent.attr('class');
            console.log('class: ' + cls);         

        });

    });

})(jQuery);
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................