CSS Double Exposure Animation Effect

byCodingFlicks -October 23, 2020

0

Hello, and welcome to the blog. Today I will share another simple snippet based on creating a double exposure CSS animation effect using only HTML and CSS. What we will do in this project is animate one image over another using CSS keyframes animations. We will also use CSS mix-blend-mode to create light opacity on one image so that the second image appears through it. We have set 90 seconds of animation-duration so that the animation occurs smoothly. Previously I have shared some other exciting snippets on CSS animation. Check those projects out if you are interested. Without explaining any further, I am providing you the code so that you play around with it.

Create one HTML and CSS file and link the CSS file to your HTML file. Afterward, copy and paste the code below and save. Run the project to your browser and see it in action. Tweaks the coding or images a bit and see how it looks.

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='https://images.pexels.com/photos/356147/pexels-photo-356147.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'> 
    </div>
</body>
</html>

CSS

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

.wrapper{
    animation: animate 90s infinite;
    background: url(https://i.postimg.cc/13Cn3Bv4/5.jpg);  
    padding:0;
    margin:0;
    width:100vw;
    height:100vh;
}

.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%; }
}

Thank you for visiting the blog, and keep coming for the more exciting snippets shortly.

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