CSS Tip : how to make your img levitate

Bringing some movement to your images with just a few lines of CSS can be funny and give a new aspect to your web page.

What do you need to do it ?

-PNG image without background.
-that's it!

First step : insert your image into your html file.

Just give a class name to your image so you won't apply the effect to all your images.

<img class="levitation"
          src="—Pngtree—wooden hanging with tropical_3551374.png"
          alt="image"
        />

Second step : size and position.

Now you just manage the size of your image and where you want it to stay. For that let's go to CSS file :

//select your image
.levitation {
//give it the size you want
  width: 20%;
//place it on where you want it to be
  position: absolute;
  top: 15em;
  left: 1em;
  transform: rotate(15deg);
//...
}

Third step (almost done!) : shadow!

To give the illusion your image is levitating, you need to put some shadow under it.
That's where no background into your png is important, you don't want a shadow of all the box.
Using a box shadow won't do the job, same issue, you would get a rectangle ...
So here's the trick : use a filter on drop shadow:

.levitation {
//... skiping size and position
//creating shadow
filter: drop-shadow(22px -15px 5px rgba(0, 0, 0, 0.5));
//...
}

Last but not least : make it move!

Having shadow under your image detach it from background, but something levitating need to move around, so let's do it!

2 parts to get it :
-tell your image to move infinitly
-tell it how to move

.levitation {
//...
//creating animation, name "bouge" (means move in french), infinitly, duration of the animation 8s on this exemple
animation: bouge 8s infinite alternate-reverse;
}

Using @keyframes feature to give starting and ending point :

 @keyframes bouge {
  /*starting point and angle (same angle as choosen into .levitation)*/
  from {
    transform: translateY(50px) rotate(15deg);
  }
  /* ending point and angle */
  to {
    transform: translateY(100px) rotate(30deg);
  }
}

Voilà , my first post in English (French people are really bad with other languages).
Hope you enjoy it.

Géraud (nurse turning to developer)