How To Create A CSS Image Float On Hover

With the release of CSS3 you can now use CSS to make animations on your html elements.

This shows an example of how you will get images to hover when the mouse hovers over them just by using CSS.

It uses the new feature of transition to change the margin property from 15px to 2px and will take 0.5 seconds to perform this action.

Below is the code you will need to do this. bounce

The HTML To Bounce Images

<img class="hoverImages" src="image.jpg" />
     <img class="hoverImages" src="image2.jpg" />
     <img class="hoverImages" src="image3.jpg" />

The CSS To Bounce Images

Now the CSS magic to perform the transition on the :hover event.

img.hoverImages {
	outline:2px solid #DDD;
	-webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
img.hoverImages:hover {
    margin-top: 5px;

Demo CSS Image Bounce

Back to top

Learn how to code with Treehouse

  • Learn projects with access to 1000+ videos
  • Practice live with our Code Challenge Engine
  • Get help in our members-only forums

Start with a 7 day free trial