<main>
<h1>Javascriptless Before/After Slider</h1>
<h3>
A simple html/css only before/after slider by <a target="_blank" href="https://twitter.com/Matt_R_Steele">@Matt_R_Steele</a>
</h3>
<p>Use the black box below to move the slider (refresh to see a new image)</p>
<div class="container">
<div></div>
</div>
<footer>All images provided by <a href="http://placeimg.com" target="_blank">placeimg.com</a></footer>
</main>
$image: 'https://placeimg.com/400/400/any';
$img: $image + '?t=' + unique_id();
main {
font-family: Helvetica, Arial, sans-serif;
max-width: 800px;
margin: 10px auto;
a {
color: #a00;
&:hover {
text-decoration: none;
}
}
h1 {
font-size: 1.75em;
font-weight: lighter;
}
h3 {
font-size: 1.2em;
margin-bottom: 1em;
color: #333;
}
h1, h3, p {
text-align: center;
}
p {
font-weight: bold;
}
}
footer {
text-align: center;
font-size: 0.8em;
color: #999;
a {
color: inherit;
}
}
.container {
width: 400px;
height: 400px;
margin: 10px auto;
border: solid 1px #ccc;
background: url($img);
div {
filter: sepia(75%);
height: 100%;
width: 10%;
max-width: 99%;
resize: horizontal;
// border-right: solid 1px #ccc;
box-sizing: border-box;
overflow: auto;
position: relative;
animation-delay: 1s;
animation-duration: 2s;
animation-name: preview;
background: url($img);
&::after {
content: ' ';
position: absolute;
width: 1em;
height: 1em;
background: black;
bottom: 0;
right: 0;
border: solid 1px white;
border-right: 0;
border-bottom: 0;
cursor: col-resize;
}
}
}
@keyframes preview {
0% {width: 10%;}
50% {width: 90%;}
100% {width: 10%;}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.