CodeNewbie Community

loading...
Cover image for CSS Tip : how to make your img levitate

CSS Tip : how to make your img levitate

MGeraud
New java developer (still studying, while working as a nurse), open to other languages. I like searching how to solve problems.
・2 min read

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"
        />
Enter fullscreen mode Exit fullscreen mode

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);
//...
}
Enter fullscreen mode Exit fullscreen mode

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));
//...
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
  }
}

Enter fullscreen mode Exit fullscreen mode

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

Géraud (nurse turning to developer)

Discussion (4)

Collapse
j3ffjessie profile image
J3ffJessie

Very nice article and explanation. Only thing I would suggest in future articles is maybe do up a Codepen with a live example so readers can see what you mean visually of the levitating image. Other than that for your first post in English it was great. Clear and concise with all information laid out simple and clean. Awesome job.

Collapse
mgeraud profile image
MGeraud Author

Thank you for your comment. I'll get a look at Codepen for next time.

Collapse
hodovani profile image
Matvii Hodovaniuk

Codepen.io example of this tutorial

Thanks for sharing. It would be good if you also share final result image.

Collapse
jordanaf808 profile image
jordanaf808

Very cool! The possibilities are endless!