Image Swap Animation in Pure CSS

#css #html #animation

Image Swap Animation in Pure CSS without using JavaScript

Let's create few elements in html using input radios, labels and images. At the end, also let's add **<div class="bg"></div>**. This is for changing screen bg color when clicked on thumb image. Below is the html code

<div class="wrapper">
        <input type="radio" name="slide" id="s2">
        <label for="s2">
            <img class="img-thumbnail" src="img/2.jpg" alt="">
            <span style="--bg:#a881ad"> Hello, This is img 2 </span>
        </label>

        <input type="radio" name="slide" id="s3">
        <label for="s3">
            <img class="img-thumbnail" src="img/3.jpg" alt="">
            <span style="--bg:#769b9d"> Hello, This is img 3 </span>
        </label>

        <input type="radio" name="slide" id="s4">
        <label for="s4">
            <img class="img-thumbnail" src="img/4.jpg" alt="">
            <span style="--bg:#b87662"> Hello, This is img 4 </span>
        </label>

        <input type="radio" name="slide" id="s5">
        <label for="s5">
            <img class="img-thumbnail" src="img/5.jpg" alt="">
            <span style="--bg:#1b9e96"> Hello, This is img 5 </span>
        </label>

        <input type="radio" name="slide" id="s1" checked>
        <label for="s1">
            <img class="img-thumbnail" src="img/1.jpg" alt="">
            <span style="--bg:#3ba4b9"> Hello, This is img 1 </span>
        </label>
        <div class="bg"></div>
</div>

Let's create CSS for elements of thumb images, radio buttons and labels and span(description).

 * {
    margin: 0;
    padding: 0;
} 

html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: monospace;
    place-content: center;
    background-size: 100% 100%;
    background-position: 0px 0px;
    background-image: radial-gradient(18% 28% at 24% 50%, #CEFAFFFF 7%,
 #073AFF00 100%), radial-gradient(18% 28% at 18% 71%, #FFFFFF59 6%, 
#073AFF00 100%), radial-gradient(70% 53% at 36% 76%, #73F2FFFF 0%, 
#073AFF00 100%), radial-gradient(42% 53% at 15% 94%, #FFFFFFFF 7%,
 #073AFF00 100%), radial-gradient(42% 53% at 34% 72%, #FFFFFFFF 7%,
 #073AFF00 100%), radial-gradient(18% 28% at 35% 87%, #FFFFFFFF 7%,
 #073AFF00 100%), radial-gradient(31% 43% at 7% 98%, #FFFFFFFF 24%,
 #073AFF00 100%), radial-gradient(21% 37% at 72% 23%, #D3FF6D9C 24%,
 #073AFF00 100%), radial-gradient(35% 56% at 91% 74%, #8A4FFFF5 9%,
 #073AFF00 100%), radial-gradient(74% 86% at 67% 38%, #84d9ff 24%,
 #073AFF00 100%), linear-gradient(125deg, #4EB5FFFF 1%, #4C00FCFF 100%);
}

/* Main div */
.wrapper {
    width: 860px;
    height: 283px;
    position: relative;
    margin: 0 auto;
}

.wrapper label {
    width: 200px;
    height: 134px;
    cursor: pointer;
    position: absolute;
    transition: 0.25s;
    border-radius: 10px;
}

.wrapper label img{
    max-width: 100%;
    height: 100%;
    border-radius: 10px;
}

.wrapper input[type="radio"] {
    padding: 5px 5px 5px 10px;
    height: 134px;
    width: 200px;
    cursor: pointer;
    position: absolute;
    z-index: -1;
    opacity: 0;
}

/* create span to show description */
.wrapper input[type="radio"]+label span {
    opacity: 0;
    background: var(--bg);
    display: none;
    border-radius: 7px;
    padding: 5px 0 5px 10px;
    margin-top: 5px;
    width: calc(100% - 10px);
    color: white;
}

Let's create and static positions for images, radio buttons and labels like below image and click event(radio:checked).

/* Assigning static positions to thumbnails */
.wrapper input[type="radio"]#s1,
.wrapper input[type="radio"]#s1+label {
    left: 0;
    top: 0;
}

.wrapper input[type="radio"]#s2,
.wrapper input[type="radio"]#s2+label {
    left: 440px;
    top: 0;
}

.wrapper input[type="radio"]#s3,
.wrapper input[type="radio"]#s3+label {
    left: 655px;
    top: 0;
}

.wrapper input[type="radio"]#s4,
.wrapper input[type="radio"]#s4+label {
    left: 440px;
    top: 150px;
}

.wrapper input[type="radio"]#s5,
.wrapper input[type="radio"]#s5+label {
    left: 655px;
    top: 150px;
}

/* onclick thumbnails, shows large image and caption*/
.wrapper input[type="radio"]:checked,
.wrapper input[type="radio"]:checked+label {
    left: 0 !important;
    top: 0 !important;
    width: 425px;
    height: 100%;
}

.wrapper input[type="radio"]:checked+label span {
    opacity: 1;
    animation-delay: 1s;
    animation: fade 1s;
    display: inline-block;
}

/* placing first item position when clicked on 2nd thumbnail */
.wrapper input[type="radio"]#s2:checked~#s1+label {
    left: 440px;
}

/* placing first item position when clicked on 3rd thumbnail */
.wrapper input[type="radio"]#s3:checked~#s1+label {
    left: 655px;
}

/* placing first item position when clicked on 4th thumbnail */
.wrapper input[type="radio"]#s4:checked~#s1+label {
    left: 440px;
    top: 150px;
}

/* placing first item position when clicked on 5th thumbnail */
.wrapper input[type="radio"]#s5:checked~#s1+label {
    left: 655px;
    top: 150px;
}

@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

Let's also create changing background color when clicked on thumbnails

/* changing background color when clicked on thumbnails */
/* For #s1 we already have background bg for body tag */
.bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}

.wrapper input[type="radio"]#s2:checked~.bg {
    background-image: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
}

.wrapper input[type="radio"]#s3:checked~.bg {
    background-image: radial-gradient(circle, rgb(197, 218, 196) 0%, rgb(88, 167, 204) 100%);
}

.wrapper input[type="radio"]#s4:checked~.bg {
    background-image: radial-gradient(circle, rgb(238, 226, 174) 0%, rgb(177, 139, 131) 100%);
}

.wrapper input[type="radio"]#s5:checked~.bg {
    background-image: radial-gradient(circle, rgb(174, 238, 225) 0%, rgb(36, 163, 136) 100%);
}

Now, we have done the swap animations with static positions. Check the output in below gif animation for demo. You can also see the change in background color when clicked on any thumbnail.

Now let's try with dynamic width and height using CSS custom variables. Using custom css variables is very useful because just by changing at only 2 places(width, height), all the sizes(large image and thumbnails) including gaps will get automatically fixed. Let's create variables in :root

 :root {
     --w: 800px;
     --h: 283px;
     --m: 15px;
     --thumbw: calc(var(--w)/4 - 15px);
     --thumbh: calc(50% - var(--m));
     --top: calc(var(--h)/2 + var(--m)/2 + 0px);
 }

Now ignore all the previous CSS and replace with below CSS. You can find below the previous CSS are commented and replaced with custom variables.

:root {
    --w: 800px;
    --h: 283px;
    --m: 15px;
    --thumbw: calc(var(--w)/4 - 15px);
    --thumbh: calc(50% - var(--m));
    --top: calc(var(--h)/2 + var(--m)/2 + 0px);
}

 * {
     margin: 0;
     padding: 0;
 }

 html {
     height: 100%;
     scroll-behavior: smooth;
 }

body {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: monospace;
    place-content: center;
    background-size: 100% 100%;
    background-position: 0px 0px;
    background-image: radial-gradient(18% 28% at 24% 50%, #CEFAFFFF 7%,
 #073AFF00 100%), radial-gradient(18% 28% at 18% 71%, #FFFFFF59 6%, 
#073AFF00 100%), radial-gradient(70% 53% at 36% 76%, #73F2FFFF 0%, 
#073AFF00 100%), radial-gradient(42% 53% at 15% 94%, #FFFFFFFF 7%,
 #073AFF00 100%), radial-gradient(42% 53% at 34% 72%, #FFFFFFFF 7%,
 #073AFF00 100%), radial-gradient(18% 28% at 35% 87%, #FFFFFFFF 7%,
 #073AFF00 100%), radial-gradient(31% 43% at 7% 98%, #FFFFFFFF 24%,
 #073AFF00 100%), radial-gradient(21% 37% at 72% 23%, #D3FF6D9C 24%,
 #073AFF00 100%), radial-gradient(35% 56% at 91% 74%, #8A4FFFF5 9%,
 #073AFF00 100%), radial-gradient(74% 86% at 67% 38%, #84d9ff 24%,
 #073AFF00 100%), linear-gradient(125deg, #4EB5FFFF 1%, #4C00FCFF 100%);
}

/* Main div */
 .wrapper {
     /* width: 860px; */
     /* height: 283px; */
     width: var(--w);
     height: var(--h);
     position: relative;
     margin: 0 auto;
 }

 .wrapper label {
     /* width: 200px; */
     width: var(--thumbw);
     height: calc(50% - var(--m) / 2);
     cursor: pointer;
     position: absolute;
     transition: 0.25s;
     border-radius: 10px;
 }

 .wrapper label img,
 .wrapper label div {
     max-width: 100%;
     height: 100%;
     border-radius: 10px;
 }

 .wrapper input[type="radio"] {
     padding: 5px 5px 5px 10px;
      /* width: 200px; */
     /* height: 134px; */
     height: calc(50% - var(--m) / 2);
     width: var(--thumbw);
     cursor: pointer;
     position: absolute;
     z-index: -1;
     opacity: 0;
 }

/* create span to show description */
 .wrapper input[type="radio"]+label span {
     opacity: 0;
     background: var(--bg);
     display: none;
     border-radius: 7px;
     padding: 5px 0 5px 10px;
     margin-top: 5px;
     width: calc(100% - 10px);
     color: white;
 }

 .wrapper input[type="radio"]:checked+label span {
     opacity: 1;
     animation-delay: 1s;
     animation: fade 1s;
     display: inline-block;
 }

/* Assigning dynamic positions to thumbnails */
 .wrapper input[type="radio"]#s1,
 .wrapper input[type="radio"]#s1+label {
     left: 0;
     top: 0;
 }

 .wrapper input[type="radio"]#s2,
 .wrapper input[type="radio"]#s2+label {
     /* left: 440px; */
     left: calc((var(--w)/2) + var(--m));
     top: 0;
 }

 .wrapper input[type="radio"]#s3,
 .wrapper input[type="radio"]#s3+label {
     /* left: 655px; */
     left: calc(var(--w)/2 + var(--thumbw) + var(--m) + 15px);
     top: 0;
 }

 .wrapper input[type="radio"]#s4,
 .wrapper input[type="radio"]#s4+label {
     /* left: 440px; */
      /* top: 150px; */
     left: calc((var(--w)/2) + var(--m));
     top: var(--top);
 }

 .wrapper input[type="radio"]#s5,
 .wrapper input[type="radio"]#s5+label {
     /* left: 655px; */
      /* top: 150px; */
     left: calc(var(--w)/2 + var(--thumbw) + var(--m) + 15px);
     top: var(--top);
 }

/* onclick thumbnails, shows large image and caption*/
 .wrapper input[type="radio"]:checked,
 .wrapper input[type="radio"]:checked+label {
     left: 0 !important;
     top: 0 !important;
     /* width: 425px; */
     width: calc(var(--w)/2);
     height: 100%;
 }

 .bg {
     position: fixed;
     left: 0;
     top: 0;
     width: 100vw;
     height: 100vh;
     z-index: -1;
 }

/* placing first item position when clicked on 2nd thumbnail */
 .wrapper input[type="radio"]#s2:checked~#s1+label {
     /* left: 440px; */
     left: calc((var(--w)/2) + var(--m));
 }

/* placing first item position when clicked on 3rd thumbnail */
 .wrapper input[type="radio"]#s3:checked~#s1+label {
     /* left: 655px; */
     left: calc(var(--w)/2 + var(--thumbw) + var(--m) + 15px);
 }

/* placing first item position when clicked on 4th thumbnail */
 .wrapper input[type="radio"]#s4:checked~#s1+label {
     /* left: 440px; */
      /* top: 150px; */
     left: calc((var(--w)/2) + var(--m));
     top: var(--top);
 }

/* placing first item position when clicked on 5th thumbnail */
 .wrapper input[type="radio"]#s5:checked~#s1+label {
     /* left: 655px; */
      /* top: 150px; */
     left: calc(var(--w)/2 + var(--thumbw) + var(--m)*2);
     top: var(--top);
 }


 @keyframes fade {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

/* changing background color when clicked on thumbnails */
/* For #s1 we already have background bg for body tag */
 .wrapper input[type="radio"]#s2:checked~.bg {
     background-image: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
 }

 .wrapper input[type="radio"]#s3:checked~.bg {
     background-image: radial-gradient(circle, rgb(197, 218, 196) 0%, rgb(88, 167, 204) 100%);
 }

 .wrapper input[type="radio"]#s4:checked~.bg {
     background-image: radial-gradient(circle, rgb(238, 226, 174) 0%, rgb(177, 139, 131) 100%);
 }

 .wrapper input[type="radio"]#s5:checked~.bg {
     background-image: radial-gradient(circle, rgb(174, 238, 225) 0%, rgb(36, 163, 136) 100%);
 }

Now in the :root {--w: 800px; --h: 270px;}. Just change the width and height proportionately. Go to url https://scriptygoddess.com/resources/proportioncalc.htm and type the values of width and height which are in :root as shown in below image.

Now type new width or height to get proportionate value. I added my new width 1000 and clicked on resize and I got 337.5 as height and I assigned in :root {--w: 1000px; --h: 337.5px;}. That's all you have to do. You can see the change in all images - width, height, gaps increases proportionately.

You can edit the value of width and height in :root in below codepen link and run. Have fun!
Codepen Demo

Thank you for watching...

DEV Community

Image Swap Animation in Pure CSS

Top comments (0)

Read next

Learn how to animate objects with Tailwind CSS and Alpine JS intersection observer

How to set up a basic Html, css and javaScript project

Customizing Parent Style from a Child Component in React

Create A Simple Analog Clock with JavaScript, HTML & CSS