<div class="gallery">
		<a href="https://unsplash.com/@jeka_fe" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://images.unsplash.com/photo-1519699047748-de8e457a634e?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Jessica Felicio" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Jessica Felicio</figcaption>
			</figure>
		</a>

		<a href="https://unsplash.com/@oladimeg" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://images.unsplash.com/photo-1504834636679-cd3acd047c06?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Oladimeji Odunsi" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Oladimeji Odunsi</figcaption>
			</figure>
		</a>

		<a href="https://unsplash.com/@oladimeg" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://images.unsplash.com/photo-1542513217-0b0eedf7005d?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Alex Perez" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Oladimeji Odunsi</figcaption>
			</figure>
		</a>
	
		<a href="https://unsplash.com/@aiony" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://images.unsplash.com/photo-1526413232644-8a40f03cc03b?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Hikiapp" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Aiony Haust</figcaption>
			</figure>
		</a>
		
		<a href="https://unsplash.com/@von_co" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://images.unsplash.com/photo-1535295972055-1c762f4483e5?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Ivana Cajina" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Ivana Cajina</figcaption>
			</figure>
		</a>

		<a href="https://unsplash.com/@caiquethecreator" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://images.unsplash.com/photo-1505151228723-18d0f726f3b1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Caique Nascimento" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Jeffery Erhunse</figcaption>
			</figure>
		</a>
	
		<a href="https://unsplash.com/@marilezhava" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://images.unsplash.com/photo-1495649904698-0f3670bdf61f?q=80&w=1934&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Mari Lezhava" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Mari Lezhava</figcaption>
			</figure>
		</a>
		
		<a href="https://unsplash.com/@suadkamardeen" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://images.unsplash.com/photo-1627388020481-4330ab86d091?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Ethan Haddox" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Suad Kamardeen</figcaption>
			</figure>
		</a>

		<a href="https://unsplash.com/@ethanhaddox" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://images.unsplash.com/photo-1517462964-21fdcec3f25b?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Amir Geshani" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Ethan Haddox</figcaption>
			</figure>
		</a>
	
		<a href="https://unsplash.com/@nixcreative" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://images.unsplash.com/photo-1593501273289-354b4fcf3add?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Tyler Nix" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Tyler Nix</figcaption>
			</figure>
		</a>

		<a href="https://unsplash.com/@majestical_jasmin" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://images.unsplash.com/photo-1619378607926-710cb2d2f9a3?q=80&w=1952&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Jasmin Chew" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Jasmin Chew</figcaption>
			</figure>
		</a>
		
		<a href="https://unsplash.com/@dimadallacqua" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://images.unsplash.com/photo-1586245895595-395fb6ffd945?q=80&w=1980&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Dima DallAcqua" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Dima DallAcqua</figcaption>
			</figure>
		</a>
</div>
$tablet: 768px;
$desktop: 1024px;
$desktopLarge: 1440px;

@mixin breakpoint($point) {
	@if $point == tablet {
    @media (min-width: $tablet) {
      @content;
		}
	}
  @if $point == desktop {
    @media (min-width: $desktop) {
      @content;
		}
	}
	 @if $point == desktopLarge {
    @media (min-width: $desktopLarge) {
      @content;
		}
	}
}

.gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: 5px;
	padding: 5px;
	transition: .3s;
	
	@include breakpoint(tablet) {
		grid-template-columns: repeat(2, 1fr);
	}
	
	@include breakpoint(desktop) {
		grid-template-columns: repeat(4, 1fr);
	}
	
	@include breakpoint(desktopLarge) {
		grid-template-columns: repeat(6, 1fr);
	}
	
	&:hover &__image {
		filter: grayscale(1);
	}
	
	&__link {
		overflow: hidden;
		height: 400px;
		max-height: 400px;
		
		&:hover {
			.gallery__image {
				filter: grayscale(0);
			}
			
			.gallery__caption {
				opacity: 1;
			}
		}
	}
	
	&__thumb {
		position: relative;
		height: 100%;
	}
	
	&__image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: .3s;
		
		&:hover {
			transform: scale(1.1);
		}
	}
	
	&__caption {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 25px 15px 15px;
		width: 100%;
		font-family: 'Helvetica', sans-serif;
		font-size: 14px;
		color: white;
		opacity: 0;
		background: linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(255, 255 ,255 , 0) 100%);
		transition: .3s;
	}
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.