Splash Page Example - Fine Art Prints for Sale

Splash Page Example

This is just a simple “Splash Page”. In this example I created four “boxes” and added a picture and title/caption 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="image-wrap">
	<div class="image">
		<a href="//www.YourWebsiteHere.com/box-one/"><img src="//www.YourWebsiteHere.com/image-01.jpg" alt="Image 1" /></a>
		<a href="//www.YourWebsiteHere.com/box-one/" class="caption">Box 1</a>
	</div>
	<div class="image">
		<a href="//www.YourWebsiteHere.com/box-two/"><img src="//www.YourWebsiteHere.com/image-02.jpg" alt="Image 2" /></a>
		<a href="//www.YourWebsiteHere.com/box-two/" class="caption">Box 2</a>
	</div>
	<div class="image">
		<a href="//www.YourWebsiteHere.com/box-three/"><img src="//www.YourWebsiteHere.com/image-03.jpg" alt="Image 3" /></a>
		<a href="//www.YourWebsiteHere.com/box-three/" class="caption">Box 3</a>
	</div>
	<div class="image">
		<a href="//www.YourWebsiteHere.com/box-four/"><img src="//www.YourWebsiteHere.com/image-04.jpg" alt="Image 4" /></a>
		<a href="//www.YourWebsiteHere.com/box-four/" class="caption">Box 4</a>
	</div>
</div>

CSS


	/* Image Wrap */
.image-wrap {
	text-align: center;
	}

	/* Image Container */
.image {
	width: 23%;
	display: inline-block;
	float: left;	
	}	
.image:nth-child(1) {
	float: left;
	}
.image:nth-child(2),
.image:nth-child(3) {
	margin: 0 1.25%;
	float:none;
	}
.image:nth-child(4) {
	float: right;
	}	

	/* Image */
.image img {
	width: 100%;
	height: 100%;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	/* Captions */
.image .caption {
	position: relative;
	float: left;
	margin-top: -20%;
	width: 96%;
	padding: 1% 0 1% 3%;
	text-align: left;
	color: #fff;
	text-shadow: #000 .1em .1em .2em;
	background: rgba(0, 0, 0, 0.5);
	}		
.image:hover .caption:nth-child(1), 
.image:hover .caption:nth-child(2), 
.image:hover .caption:nth-child(3), 
.image:hover .caption:nth-child(4) {
	background: rgba(0, 0, 0, 0.8);
	}
	
@media only screen and (max-width: 799px) {
	.image,
	.image:nth-child(1),
	.image:nth-child(2),
	.image:nth-child(3),
	.image:nth-child(4) {
		width:100%;
		clear:both;
		margin:0 auto;
		}
}	

Powered by SmugMug Log In