Splash Page Example in SmugMug - Mike Matenkosky

Splash Page Example

This is just a simple “Splash Page”. In this example I created four “boxes” that are 495px x 330px and added a picture and title/image-title on top of the image. When you click on the image, it takes you to that page. In this example, when you click on an image it takes you to one of my galleries.

HTML


<div class="grid-wrapper">

	<div class="image-wrap">
	
		<a href="//www.YourWebsiteHere.com/box-one/">
		
			<img src="//www.YourWebsiteHere.com/image-01.jpg" alt="Image 1" />
			
			<h3 class="image-title">Box 1</h3>
			
		</a>
		
	</div>

	<div class="image-wrap">
	
		<a href="//www.YourWebsiteHere.com/box-two/">
		
			<img src="//www.YourWebsiteHere.com/image-01.jpg" alt="Image 2" />
			
			<h3 class="image-title">Box 2</h3>
			
		</a>
		
	</div>

	<div class="image-wrap">
	
		<a href="//www.YourWebsiteHere.com/box-three/">
		
			<img src="//www.YourWebsiteHere.com/image-01.jpg" alt="Image 3" />
			
			<h3 class="image-title">Box 3</h3>
			
		</a>
		
	</div>

	<div class="image-wrap">
	
		<a href="//www.YourWebsiteHere.com/box-four/">
		
			<img src="//www.YourWebsiteHere.com/image-01.jpg" alt="Image 4" />
			
			<h3 class="image-title">Box 4</h3>
			
		</a>
		
	</div>
	
</div>

CSS


/**
 * Splash Page Images
************************************************/
.grid-wrapper {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-ms-justify-content: space-between;
		justify-content: space-between;
	}	
	
.image-wrap {
	position: relative;
	display: inline-block;
	margin: 0 auto 1.5rem;
	padding: 0 0 1.5rem;
	-ms-justify-content: center;
	    justify-content: center;
	}	
	
	.image-title {
		position: absolute; 
		text-align: center; 
		background: rgba( 0, 0, 0, .8 );
		padding: 10px 0;
		top: 50%; 
		left: 0; 
		right: 0; 	
		-webkit-transform: translate( 0, -50% ); 
		   -moz-transform: translate( 0, -50% ); 
		    -ms-transform: translate( 0, -50% ); 
		        transform: translate( 0, -50% ); 
		}
		
	h3.image-title { color: #fff; }	
	
.image-wrap > a:hover { opacity: .9 }

Powered by SmugMug Log In