Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
<base href="">
<div id=sliding-container>
<img src="hong-kong-skyline.jpg" alt>
<figcaption>Hong Kong Skyline at Night</figcaption>
<img src="monument-valley-panorama.jpg" alt style="position: absolute;">
<img src="monument-valley-mittens-panorama.jpg" alt>
<figcaption>Monument Valley</figcaption>
body {
background: #222;
#sliding-container {
display: flex;
font-family: Avenir, Helvetica, sans-serif;
#sliding-container figure {
position: relative;
flex: 1;
font-size: 0;
overflow: hidden;
margin: 0;
#sliding-container img {
transition: 2.4s linear;
max-width: 100%;
#sliding-container figure:first-of-type img {
width: 133%;
max-width: initial;
#sliding-container figure:first-of-type:hover img {
transform: translateX(-24%);
#sliding-container figure figcaption {
background: rgba(0, 0, 0, 0.3);
font-size: 1rem;
width: 100%;
color: #fff;
padding: .3rem;
position: absolute;
margin: 0;
transition: .6s;
top: -2rem;
#sliding-container figure:hover figcaption {
transform: translateY(2rem);
#sliding-container figure:last-of-type:hover img:nth-child(1) {
opacity: 0;
@media screen and (max-width: 600px) {
#sliding-container {
flex-direction: column;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.