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="content-wrapper">

	<figure>
		<a href="Your-URL-Here.com">
			<img src="Your-Photo-URL-here.jpg" alt="Image 1" />
			<figcaption>Title 1</figcaption>
		</a>
	</div>

	<figure>
		<a href="Your-URL-Here.com">
			<img src="Your-Photo-URL-here.jpg" alt="Image 2" />
			<figcaption>Title 2</figcaption>
		</a>
	</div>	

	<figure>
		<a href="Your-URL-Here.com">
			<img src="Your-Photo-URL-here.jpg" alt="Image 3" />
			<figcaption>Title 3</figcaption>
		</a>
	</div>	

	<figure>
		<a href="Your-URL-Here.com">
			<img src="Your-Photo-URL-here.jpg" alt="Image 4" />
			<figcaption>Title 4</figcaption>
		</a>
	</div>
	
</div>

CSS


/**
* Splash Page Images
************************************************/
.content-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

figure {
	position: relative;
	margin: 0 1rem 2rem;
	padding: 1rem;
	border: 1px solid #e3e3e3;
	background: #f7f7f7;
	transition-duration: 0.4s;
}

	figure:hover {opacity: .9;}

figcaption {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	font-size: 2rem;
	text-transform: uppercase;
	letter-spacing: .5rem;
	color: #fff;
	width: 100%;
	text-align: center;
	padding: 1rem 0;
	background: rgba( 0, 0, 0, .8 );
}
/* Splash Page Images End */

Powered by SmugMug Owner Log In