Image Masking and Sliding Transition Effect

While redesigning our new ETC sites we wanted to change the styles of our image previews to better match the new look & feel. Rather than going back to PhotoShop and cropping thousands upon thousands of images we opted to let some CSS trickery do the cropping for us.

In one of our WebTreats posts: 504 Awake tileable backgrounds, we took a series of long rectangular images and converted them to circular frames where a portion is revealed at the start and the rest scrolls by as you hover. In the end it turned out to be a little more difficult to make cross browser than we anticipated, below are our results.

DEMO #1 - Transitioning Margins ( hover over the image below )

key POINTS

As simple as it gets. We're just transitioning the image's "left-margin" postion.