<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.