Add Drop Shadow & Border to the Collage Portrait Gallery

Demo

This adds a red 2px border around the image and the text, similar to Pinterest. The opacity of the border, text and image changes when hovered. Add this to your theme’s CSS or add a CSS block on your ‘All Galleries’ section.

CSS


/** 
* Style Similar to Pinterest on the Collage Portrait Gallery
**************************************************************/
.sm-user-ui .sm-tiles-column-organic.sm-tiles-info-after .sm-tile-info {
	padding-right: 0.6em;
	color: white;
}

.sm-user-ui .sm-gallery-columnorganic .sm-tile {
	margin: 0 5px 15px;
	border: 2px solid #red;
	background-color: #151515;
}
	
	.sm-user-ui .sm-gallery-columnorganic .sm-tile:hover {
		border-color: blue;
		opacity: .7;	
	}
/* Style Similar to Pinterest on the Collage Portrait Gallery End */