Deneme Ürün

Zooming in on an image is a functional and appreciated effect to have available. This functionality can be implemented in various ways, including through pure CSS, pure JavaScript or through jQuery. Out of these options, the pure CSS solution is the fastest as the other 2 ways require the execution of a set of code blocks, which involves DOM traversal and is an expensive process. Luckily for us, CSS3 provides a simple and efficient solution just by tweaking some CSS3 properties!
CSS3 has a transform property which allows you to translate, rotate, scale, and skew elements. This pure CSS solution will zoom an image inside the container on mouse over.

HTML Markup
First, let’s take a look at the HTML. The HTML markup has an image wrapped inside a container and item div element. The container is the parent element and the item is the child element, which holds the image. The item div element is required to define an absolute position for the image inside the container. The images used in this post are taken from Free Images.