Splash Page Using a HTML/CSS Block in SmugMug - Mike Matenkosky

Splash Page Using a HTML/CSS Block in SmugMug

This is just a simple “Splash Page” using one HTML/CSS block. In this example I created four “image containers” and added a picture and title/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. Take a look at this page on different screen sizes, the images are responsive.

HTML


<div class="grid-wrapper">

	<div class="grid-item">
		<div class="image-wrap">
			<a href="Your-URL-Here.com">
				<img src="Your-Photo-URL-here.jpg" alt="Image 1" />
				<h3 class="title">Title 1</h3>
			</a>
		</div>
	</div>
	
	<div class="grid-item">
		<div class="image-wrap">
			<a href="Your-URL-Here.com">
				<img src="Your-Photo-URL-here.jpg" alt="Image 2" />
				<h3 class="title">Title 2</h3>
			</a>
		</div>	
	</div>
	
	<div class="grid-item">
		<div class="image-wrap">
			<a href="Your-URL-Here.com">
				<img src="Your-Photo-URL-here.jpg" alt="Image 3" />
				<h3 class="title">Title 3</h3>
			</a>
		</div>	
	</div>
	
	<div class="grid-item">
		<div class="image-wrap">
			<a href="Your-URL-Here.com">
				<img src="Your-Photo-URL-here.jpg" alt="Image 4" />
				<h3 class="title">Title 4</h3>
			</a>
		</div>
	</div>
	
</div>

CSS


/**
 * Splash Page Images
************************************************/
.grid-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	}	
	
	.grid-item {
		margin: 0 auto 1.5rem;
		padding: 0 0 1.5rem;
		display: flex;
		flex-flow: column nowrap;		
		}	

		.image-wrap {
			position: relative;
			display: inline-block;
			padding: 10px;
			border: 1px solid #e3e3e3;
			background: #f7f7f7;
			transition-duration: 0.4s;
			}	
			
			.image-wrap:hover { opacity: .9; }
			
		.image-wrap .title {
			position: absolute; 
			text-align: center; 
			margin: auto;
			top: 50%; 
			left:  0; 
			right: 0; 	
			padding: 10px 0;
			background: rgba( 0, 0, 0, .8 );
			color: #fff;
			transform: translate( 0, -50% );
		}			

Powered by SmugMug Log In