Skip to content
Advertisements

CSS Before/After Image Slider

CODEPEN

CSS Before/After Image Slider

HTML

    <div class="container">
        <div class="divisor"></div>
    </div>

CSS

body{
    padding: 0;
    margin: 0;
}

.container {
    position: relative;
    width: 700px;
    height: 400px;
    margin: 100px auto;
    background: url("https://images.unsplash.com/photo-1460999158988-6f0380f81f4d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
    background-size: 700px 400px;
    box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.5);
    border: 2px solid #262626;
}
.divisor {
    position: absolute;
    top: 0;
    left: 0;
    filter: sepia(100%);
    height: 100%;
    width: 10%;
    max-width: 100%;
    resize: horizontal;
    box-sizing: border-box;
    overflow: auto;
    position: relative;
    background: url("https://images.unsplash.com/photo-1460999158988-6f0380f81f4d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
    background-size: 700px 400px;
    border: 2px solid #262626;
    animation-delay: 0.75s;
    animation-duration: 2s;
    animation-name: ani;
}
.divisor:after {
    content: '';
	position: absolute;
	right: 0; 
    bottom: 0;
	width: 13px; 
    height: 13px;
	padding: 5px;
	background: linear-gradient(-45deg, #262626 50%, transparent 0);
	cursor: ew-resize;
}
@keyframes ani {
    0% {width: 10%;}
    50% {width: 100%;}
    100% {width: 10%;}
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: