hover transition
comment 0

Diagonal Sliding Hover Transition

Fancy a cool-looking image hover transition using only CSS3? Check out this demo by webdesigncrowd.com. When hovering on the demo image, a diagonal shape layer will smoothly slide-in from the edge to reveal extra information about the image. This pretty simple and creative trick was created using two different shape overlays and merged into one shape. The original shapes are triangle and rectangle. I think the effect is cool but the amount of HTML needed is kinda bulky. Hit the button below to see the full code and demo.

View More   View Demo

Filed under: CSS

About the Author

Posted by

Sani Halid is a front-end developer at Stampede and is committed to clean and elegant code. Yet another gamer to join the pack, Sani is also the Editor at Constructs where he shares his daily CSS findings and other front-end development goods.

Leave a Reply