PROWAREtech

articles » current » css » image-portfolio

CSS: Image Portfolio

Create an image portfolio to show off images using only HTML and CSS.

This "image portfolio" requires no JavaScript to function. The only downside to this is that all the images must download when the page is loaded so it makes sense just to use the large images for thumbnails. With JavaScript, images can be loaded as they are viewed.

This works thanks to the target pseudo-class selector which works with the id of the HTML element through the fragment specified in the address of the page (URI).

Learn how to format images of various aspect ratios.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Image Portfolio</title>
	<style>

		/* MOBILE CSS */

		*, *::before, *::after {
			box-sizing: border-box;
		}
		body {
			margin: 0;
			padding: 0;
			font-family: sans-serif;
			background-color: #222;
		}
		img {
			display: block;
			max-width: 100%;
		}
		.portfolio-thumbs {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
		}
		.portfolio-thumb {
			border: 1px solid #222;
			text-align: center;
			width: 160px;
		}
		.portfolio-item-sub a {
			color: #ff6a00;
			padding: 10px 20px;
			border: 3px solid #ff6a00;
			text-decoration: none;
			text-transform: uppercase;
		}
			.portfolio-item-sub a:hover {
				color: #fff;
				background-color: #ff6a00;
			}
		.portfolio-large-item {
			position: fixed;
			display: flex;
			visibility: hidden;
			align-items: center;
			justify-content: center;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0,0,0,0.75);
			color: #eee;
			transform: scale(0);
			transition: .25s ease-in-out;
		}
			.portfolio-large-item:target { /* here's all the magic to making this work without JavaScript */
				visibility: visible;
				transform: scale(1);
			}
		.portfolio-item-content {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #000;
		}
			.portfolio-item-content img {
				border-radius: 16px;
			}
			.portfolio-item-content p {
				padding: 0 16px;
			}
		.portfolio-item-close {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 32px;
			height: 32px;
			top: 0;
			right: 0;
			border-radius: 50%;
			background-color: #ff6a00;
			color: #fff;
			text-decoration: none;
			cursor: pointer;
		}
		.portfolio-item-close::after {
			content: "X";
			font-weight: bold;
			font-size: 24px;
		}

		/* DESKTOP CSS */

		@media (min-width: 768px) {
			.portfolio-thumbs { /* center the thumbnails on the screen; this can be removed */
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	</style>
</head>
<body>
	<div class="portfolio-thumbs">

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-1"><img src="https://picsum.photos/id/1000/800" /></a>
		</div>

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-2"><img src="https://picsum.photos/id/1001/800" /></a>
		</div>

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-3"><img src="https://picsum.photos/id/1003/800" /></a>
		</div>

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-4"><img src="https://picsum.photos/id/1004/800" /></a>
		</div>

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-5"><img src="https://picsum.photos/id/1015/800" /></a>
		</div>

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-6"><img src="https://picsum.photos/id/1006/800" /></a>
		</div>

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-7"><img src="https://picsum.photos/id/1027/800" /></a>
		</div>

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-8"><img src="https://picsum.photos/id/1008/800" /></a>
		</div>

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-9"><img src="https://picsum.photos/id/1009/800" /></a>
		</div>

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-10"><img src="https://picsum.photos/id/1010/800" /></a>
		</div>

	</div>

	<div class="portfolio-large-items">

		<div class="portfolio-large-item" id="portfolio-large-item-1">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a> <!-- NOTICE href="#!" -->
				<img src="https://picsum.photos/id/1000/800" />
				<h3 class="portfolio-item-title">#1</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="portfolio-large-item" id="portfolio-large-item-2">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a>
				<img src="https://picsum.photos/id/1001/800" />
				<h3 class="portfolio-item-title">#2</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="portfolio-large-item" id="portfolio-large-item-3">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a>
				<img src="https://picsum.photos/id/1003/800" />
				<h3 class="portfolio-item-title">#3</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="portfolio-large-item" id="portfolio-large-item-4">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a>
				<img src="https://picsum.photos/id/1004/800" />
				<h3 class="portfolio-item-title">#4</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="portfolio-large-item" id="portfolio-large-item-5">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a>
				<img src="https://picsum.photos/id/1015/800" />
				<h3 class="portfolio-item-title">#5</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="portfolio-large-item" id="portfolio-large-item-6">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a>
				<img src="https://picsum.photos/id/1006/800" />
				<h3 class="portfolio-item-title">#6</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="portfolio-large-item" id="portfolio-large-item-7">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a>
				<img src="https://picsum.photos/id/1027/800" />
				<h3 class="portfolio-item-title">#7</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="portfolio-large-item" id="portfolio-large-item-8">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a>
				<img src="https://picsum.photos/id/1008/800" />
				<h3 class="portfolio-item-title">#8</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="portfolio-large-item" id="portfolio-large-item-9">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a>
				<img src="https://picsum.photos/id/1009/800" />
				<h3 class="portfolio-item-title">#9</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="portfolio-large-item" id="portfolio-large-item-10">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a>
				<img src="https://picsum.photos/id/1010/800" />
				<h3 class="portfolio-item-title">#10</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

	</div>
</body>
</html>

This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE