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.

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 {
	margin:20px;
	padding:3px;
	outline:2px solid #DDD;
	border:#a1a1a1;	
	float:left;
	-webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}
 
img.hoverImages:hover {
	cursor:pointer;
    margin-top: 5px;
}