<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Animated Photo Gallery (Also Frustrating)</title>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="gallery">
<div class="gallery__strip__wrapper">
<div class="gallery__strip one">
<div class="photo">
<div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-kyoto.jpeg"/></div>
<div class="photo__name">Kyoto</div>
</div>
<div class="photo">
<div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-austria.jpeg"/></div>
<div class="photo__name">Halstatt</div>
</div>
<div class="photo">
<div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-peru.jpeg"/></div>
<div class="photo__name">Peru</div>
</div>
<div class="photo">
<div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-rio.jpeg"/></div>
<div class="photo__name">Rio</div>
</div>
</div>
</div>
<div class="gallery__strip__wrapper">
<div class="gallery__strip two">
<div class="photo">
<div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-italy.jpeg"/></div>
<div class="photo__name">Italy</div>
</div>
<div class="photo">
<div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-osaka.jpeg"/></div>
<div class="photo__name">Osaka</div>
</div>
<div class="photo">
<div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-bali.jpeg"/></div>
<div class="photo__name">Bali</div>
</div>
<div class="photo">
<div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-paris2.jpg"/></div>
<div class="photo__name">Paris</div>
</div>
</div>
</div>
<div class="gallery__strip__wrapper">
<div class="gallery__strip three">
<div class="photo">
<div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-cusco.jpeg"/></div>
<div class="photo__name">Cusco</div>
</div>
<div class="photo">
<div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-rome.jpeg"/></div>
<div class="photo__name">Rome</div>
</div>
<div class="photo">
<div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-paris.jpeg"/></div>
<div class="photo__name">Paris</div>
</div>
<div class="photo">
<div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-bali2.jpeg"/></div>
<div class="photo__name">Bali</div>
</div>
</div>
</div>
<div class="gallery__strip__wrapper">
<div class="gallery__strip four">
<div class="photo">
<div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-milan.jpeg"/></div>
<div class="photo__name">Milan</div>
</div>
<div class="photo">
<div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-budapest.jpg"/></div>
<div class="photo__name">Budapest</div>
</div>
<div class="photo">
<div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-vienna.jpg"/></div>
<div class="photo__name">Vienna</div>
</div>
<div class="photo">
<div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-mexico.jpg"/></div>
<div class="photo__name">Mexico</div>
</div>
</div>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
</body>
</html>
body {
background: #222;
font-family: "Fira Sans", sans-serif;
padding-right: 2rem;
}
* {
box-sizing: border-box;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
overflow: hidden;
max-width: 1300px;
margin: auto;
}
.gallery__strip {
min-height: 100vh;
}
.gallery__strip__wrapper {
flex: 0 0 100%;
justify-content: flex-end;
background: #222;
border-right: 2px solid #333;
position: relative;
}
@media (min-width: 500px) {
.gallery__strip__wrapper {
flex: 0 0 50%;
}
}
@media (min-width: 950px) {
.gallery {
height: 100vh;
}
.gallery__strip.one {
animation: 60s move-it ease alternate infinite 5s;
transform: translateY(2%);
}
.gallery__strip.three {
animation: 70s move-it ease alternate infinite 6s;
transform: translateY(2%);
}
.gallery__strip.two {
animation: 58s move-it-2 ease alternate infinite 5s;
transform: translateY(-50%);
}
.gallery__strip.four {
animation: 65s move-it-2 ease alternate infinite 5.5s;
transform: translateY(-50%);
}
.gallery__strip:hover {
animation-play-state: paused;
}
.gallery__strip__wrapper {
flex: 0 0 25%;
}
}
.photo {
position: relative;
text-align: right;
padding-bottom: 3rem;
}
.photo__image img {
width: 90%;
transform: translateX(30%);
transition: 1s cubic-bezier(0.19, 1, 0.22, 1) 0.2s;
}
.photo__name {
text-transform: uppercase;
font-size: 40px;
letter-spacing: 2px;
color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
margin-top: -25px;
transition: 0.4s ease-in-out 0.4s;
position: relative;
width: 100%;
}
.photo:hover .photo__image img {
transform: translateX(0%);
}
.photo:hover .photo__name {
color: #fff;
}
@keyframes move-it {
0%,
90%,
100% {
transform: translateY(2%);
}
45% {
transform: translateY(-50%);
}
}
@keyframes move-it-2 {
0%,
90%,
100% {
transform: translateY(-50%);
}
45% {
transform: translateY(5%);
}
}