Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id=sliding-container>
<figure>
<img src="hong-kong-skyline.jpg" alt>
<figcaption>Hong Kong Skyline at Night</figcaption>
</figure>
<figure>
<img src="monument-valley-panorama.jpg" alt style="position: absolute;">
<img src="monument-valley-mittens-panorama.jpg" alt>
<figcaption>Monument Valley</figcaption>
</figure>
</div>
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.