Barjeel image grid

by Rob Carroll

HTML

<div class="center round">
      <a href="http://www.barjeelartfoundation.org/collection/walead-beshty-fedex-tube/">
       <div class="vignette">	
			<img alt="FedEx Tube by Walead Beshty" class="attachment-cropped-thumb" src="http://www.barjeelartfoundation.org/wordpress/wp-content/uploads/2015/10/Walead-Beshty-2-crop-170x170.jpg">	
       </div> <!-- .vignette -->					
		</a>	
		<h1 class="artwork-title uppercase bold-italic">
     <a href="http://www.barjeelartfoundation.org/collection/walead-beshty-fedex-tube/">FedEx Tube</a> 
     </h1>	
    <h2 class="artist-name">	
		<a href="http://www.barjeelartfoundation.org/artist/united-kingdom/walead-beshty/">Walead Beshty</a></h2>
         <ul class="artwork-meta">													
						<li class="meta-link"><a href="http://www.barjeelartfoundation.org/artist/united-kingdom/">United Kingdom</a></li> 												
      </ul>
    </div><!-- .center -->

CSS

.center {
    text-align: center;
}
.round {
    border-radius: 50%;
}

.vignette {
    border-radius: 50%;
    height: auto;
    margin: auto;
    max-width: 100%;
    transition-duration: 0.2s;
    transition-property: box-shadow;
    transition-timing-function: ease-in-out;
}

JavaScript

//http://philipwalton.github.io/solved-by-flexbox/demos/grids/