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>
.
..
tutorial
CSS: Add Stroke to Text - How to Outline Text

How to outline text by adding stroke using only CSS; compatible with all browsers including IE11.
CSS: Auto-hide Page Sections

Automatically hide page sections to maximize page space; uses HTML and CSS only.
CSS: Basic Contact Form

Create a responsive, good looking, basic contact form using only HTML and CSS.
CSS: Bokeh Background Online Code Generator

HTML and CSS only.
CSS: Box Shadow

All about the box-shadow property.
CSS: Card Selection Changes Background

Change the background when a card is selected using only HTML and CSS.
CSS: Carousel

Animated, responsive carousel / hero / slider menu using only HTML and CSS.
CSS: Center Elements on Page

How to center elements both vertically and horizontally on the page.
CSS: Christmas Themed Bokeh Background

A bokeh background with a Christmas theme.
CSS: Create a Speech Bubble/Balloon

An example popup speech bubble or balloon.
CSS: Custom Checkboxes and Radio Buttons

Create custom checkboxes and radio buttons using only HTML and CSS.
CSS: Custom Dropdown Lists

Stylish dropdown lists using only HTML and CSS.
CSS: Customize Scrollbars on Chrome, Edge and Firefox

Use only CSS to customize scrollbars.
CSS: Customize SELECT and OPTION elements

How to customize the look of select and option HTML elements.
CSS: Dark Mode Contact Form

Create a responsive dark mode contact form using only HTML and CSS.
CSS: Dark Mode Login and Register Form or Page

Combination dark mode login and register form in one using only HTML and CSS.
CSS: Detect Dark Mode

Using CSS @media query to detect if user is using dark mode theme.
CSS: Expanding Search Bar

HTML and CSS only.
CSS: Feature Queries

Use @supports to know which CSS features are supported.
CSS: Five Star Rating Form

An example five star rating form example using only HTML and CSS.
CSS: Flip Cards Based Website Landing Page

Responsive website landing page with flip cards using only HTML and CSS.
CSS: Format Images with Varying Aspect Ratios

Format images with varying aspect ratios to fit the same aspect ratio without stretching.
CSS: Hero or Banner Menu System

A great way to organize large menus.
CSS: Horizontally Scrolling Cards with a Snap-to Feature

Create cards with a horizontal scroll and a snap-to feature.
CSS: Image Portfolio

Create an image portfolio to show off images using only HTML and CSS.
CSS: Landing Page with Menu

A large menu that slides in from the sides and then the top.
CSS: Large Dropdown Menu

A responsive, large dropdown menu for sites with lots of menu options.
CSS: Loading Page - Brine Shrimp

Create an abstract brine shrimp swimming along while the page is loading.
CSS: Loading Page - Data Gatherer

Create an abstract net that appears to be gathering data as it animates.
CSS: Loading Page - Inch Worm

Create an abstract inch worm that inches along as the page is loading.
CSS: Loading Page - Laser Lights

Create a nerve racking light show while the page is loading.
CSS: Loading Page - Sine Wave

A sine wave to watch as the page loads.
CSS: Mastering Bootstrap Rows and Columns

How the rows and columns work.
CSS: Menu with Submenus

A menu system which has submenus upon submenus.
CSS: Mobile Navigation Menu

A mobile-centric navigation menu using HTML and CSS only.
CSS: Mobile-Responsive Website for Beginners

HTML and CSS only.
CSS: Mock Google Form

HTML and CSS only.
CSS: Page Rotates on the Y-axis to Reveal Menu

3D animated, responsive, Y-axis rotating page reveals menu using only HTML and CSS.
CSS: Page with Lifted Corners

A piece of paper laying flat with lifted, peeled or curled corners with a couple versions to help fit different scenarios.
CSS: Parallax Effect Footer

A web page footer with a parallax effect.
CSS: Parallax Effect Landing Page

HTML and CSS only.
CSS: Position Page Footer at the Bottom

How to position the page footer at the bottom for all browsers including IE6.
CSS: Rainbow Linear Gradient

A rainbow effect for a background.
CSS: Remove White Space Between Images

Several options to remove white space between pictures.
CSS: Responsive Avatar Cards

An interesting way to organize data in limited space; uses HTML and CSS only.
CSS: Single Page Website

HTML and CSS only.
CSS: Slick, Simple Nav-Bar Menu

HTML and CSS only.
CSS: Slide on Scroll

HTML and CSS only.
CSS: Tilting Page Reveals Menu

Animated, responsive, tilting website page reveals menu using only HTML and CSS.
CSS: Toggle Buttons

Use checkbox and radio controls to create toggle buttons just like on the Apple iPhone.
CSS: Unique Cube Menu

A rotating cube menu using only HTML and CSS.
CSS: Web Colors

A color sortable table of the standard web colors with their CSS names for use in Cascading Style Sheets pages.
CSS/JS: Landing Page with Water Ripples

A website landing page with a water ripple effect (requires one line of JavaScript).
Tailwind CSS Files Download

Download Tailwind v8.0.1 CSS files.

PROWAREtech

Hello there! How can I help you today?
Ask any question

PROWAREtech

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.
ACCEPT REJECT