CSS Double Exposure Animation Effect

byCodingFlicks -October 23, 2020

0

CSS animation in web design is something that brings a design to life without the help of JavaScript. If you want to highlight an important part of a website, improve user engagement, or create a memorable experience, then CSS animation can help you with that. If we can use CSS animation techniques wisely, our website can look different without slowing it down. Today we will share with you a CSS animation snippet about double exposure animation. Below there is a video tutorial about it. Make sure to watch it before collecting the code.

Video Tutorial:

We hope you watched the video tutorial and got an idea of what today's CSS snippet is all about. CSS animation not only makes a website visually interesting but also helps guide a user’s attention. In the HTML section of today's CSS animation example, we have taken a simple <div> whose class name is wrapper. It acts as the main container of the snippet. Inside it, we have taken an <img> tag whose class name is img-area. In the CSS part, we make sure the body and html are set to take up the full viewport width and height. The margins and padding are removed in order to eliminate extra space around the elements. We have set a background image for the .wrapper class. We have set background-size: cover, so that the image overs the entire screen. This is the first image of the double exposure animation effect we are making. The @keyframes animate rule moves the background image horizontally. We used background-position from 0% to 100% and back. This CSS properties will create a smooth sliding motion that repeats forever. After that, the .img-area class positions the second image on top of the wrapper. The mix-blend-mode: lighten, which blends the image with the moving background, which will create double exposure animation.

You May Also Like:

CSS Double Exposure Animation [ Source Code ]:

To create this CSS Double Exposure Animation using HTML and CSS, you have to create an HTML file and a CSS file. After that, you have to copy the code from the code box below and paste it into your file. After saving the code, open it in your browser and see if it is working or not. You can also download the code from the download button below the blog post.

ADD HTML:

<!doctype html>
<!--code by codingflicks.com-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Double Exposure Animation Effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class='wrapper'>
        <img class='img-area' src='1.jpg'> 
    </div>
</body>
</html>

ADD CSS:

body, html {
    overflow:hidden;
    width:100vw;
    height:100vh;
    margin: 0;
    padding: 0;
}

.wrapper{
    animation: animate 90s infinite;
    background: url(2.jpg);  
    padding:0;
    margin:0;
    height:100vh;
	background-size: cover;
}

.img-area{
    mix-blend-mode: lighten;
    position: absolute;
    bottom:0;
    width:100%;
    z-index:2;
    height: 100%;
}

@keyframes animate {
    0%   { background-position:0% 100%; }
    50%   { background-position:100% 100%; }
    100%   { background-position:0% 100%; }
}

This double exposure animation is eye-catching because it subtly combines movement and texture. Website owners can use this effect on landing pages or hero sections, or in creative portfolios where they want to showcase visuals in a unique way. We hope you have already collected the source code. If you want more, click the "Load More" button on our homepage. Thank you for visiting.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.